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 .pdf
file in my About
component, and Jest
does not take kindly to it.
npm run test
✹ âœ
> react-universal-blog-app@1.0.0 test /Users/mariacam/Development/portfolio-react
> jest
PASS src/sum.test.js
FAIL src/App.test.js
â— Test suite failed to run
/Users/mariacam/Development/portfolio-react/images/resume/mdcResume8217.pdf:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){%PDF-1.3
^
SyntaxError: Unexpected token %
at ScriptTransformer._transformAndBuildScript (node_modules/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
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 100000
}
},
]
},
// in webpack-prod.config.js
{
test: /\.(jpg|png|gif|svg|pdf|ico)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name]-[hash:8].[ext]'
},
},
]
},
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:
"jest": {
"setupFiles": [
"raf/polyfill"
],
"moduleNameMapper": {
"\\.(|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
}
},
Apparently I hadn't included .pdf
! That was because I had added that asset much later, and didn't think to add it to my jest
configuration in package.json
. That resulted in my test failing. I added pdf
to the mix:
"jest": {
"setupFiles": [
"raf/polyfill"
],
"moduleNameMapper": {
"\\.(pdf|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
}
},
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.
Happy React testing with Jest!
Related resources:
React workflows without Create React App
Top comments (0)