I use Facebook’s
Jest to test my React applications. Yesterday, I ran a test to make sure that the changes I made to my
Work component passed in my Portfolio React app. It did not! But as indicated in the iTerm2 console, it was not because of any errors in the
Work component. It was because I am using a .
About component, and
Jest does not take kindly to it.
npm run test
> firstname.lastname@example.org test /Users/mariacam/Development/portfolio-react
● Test suite failed to run
SyntaxError: Unexpected token %
at ScriptTransformer.transformAndBuildScript (nodemodules/jest-runtime/build/script_transformer.js:305:1)
I include it in my
webpack configs so that
webpack knows to load it:
// in webpack-dev.config.js
// in webpack-prod.config.js
Then why was this happening? I mock out files for
Jest to ignore in my
package.json, so I went to see what types of files I had included there:
Apparently I hadn’t included
jest configuration in
package.json. That resulted in my test failing. I added
Then I ran
npm run test in
iTerm2 again. And guess what? My test passed!
So if you are using Jest to run tests in your React application, make sure that you mock out certain types of assets that would otherwise cause your tests to fail! I have included links to resources related to this topic at the end of the article.