DEV Community

Maria Campbell
Maria Campbell

Posted on

Jest, React and mocks

React and Jest

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)

Enter fullscreen mode Exit fullscreen mode

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]'
            },
        },
    ]
},

Enter fullscreen mode Exit fullscreen mode

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"
  }
},
Enter fullscreen mode Exit fullscreen mode

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"
  }
},

Enter fullscreen mode Exit fullscreen mode

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

Jest and webpack

Handling Static Assets with Jest

Testing React Apps With Jest

Top comments (0)