Setting up Jest to work with Laravel-Mix, Webpack, Babel
Sharing my experiences in making Jest work with Laravel-Mix, Webpack and Babel
Jest has established itself as one the leading libraries for TDD (Test Driven Development) for ReactJS; perhaps being created by developers at FB itself has furthered its cause.
So when I wanted to learn ReactJS (which had been on my TODO list for as long as I can remember now) I naturally picked up Jest as my library of choice. However, there was a catch, I was working on a Laravel application so had to get Jest to work with Webpack and Babel in a Laravel app, most of what I document below are steps collated from a default ReactJS-only app to things I learnt about Babel(phew!) in the process.
Packages Installation
Can’t be any simpler than a few commands so here are the commands of libraries I installed to the project
Base packages required for ReactJS testing:
Supporting libraries to get Jest to behave well with laravel-mix
After this, you need to configure Jest
We need to provide a mocked file return for all static files, the block in moduleNameMapper does precisely that. Since I’m using JSdom and enzyme with jest I added them in the setupFiles section. I’m essentially adding boilerplate configuration code here so it’s available on all unit tests without having to set this up in the before blocks of each of the tests.
That’s it, you can now run your jest tests without hacking through webpack configuration unlike as suggested in quite some forums.
