DEV Community

Maria Campbell
Maria Campbell

Posted on

6

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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay