Install Enzyme and Configure Jest

Tyler Clark
InstructorTyler Clark

Share this video with your friends

Send Tweet

In order to get up and going with Enzyme and Jest, some configurations are required. We will need to install some babel plugins, create a specific package json script, and depending on which version of Jest, add Jest configurations to our package.json.

Krishna Pradhan
Krishna Pradhan
~ 3 years ago

In the scripts if I replace test: "react-scripts test --env=jsdom" with test: "jest". It doesn't works gives this error

it('renders without crashing', () => { 6 | const div = document.createElement('div'); > 7 | ReactDOM.render(<App />, div); | ^ 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 |

Test Suites: 1 failed, 1 total

Jonatas Miguel
Jonatas Miguel
~ 3 years ago

In the scripts if I replace test: "react-scripts test --env=jsdom" with test: "jest". It doesn't works gives this error

I had the same situation. Once I added the react-scripts portion back in, it started to build. In fact, if you look at later videos, @tyler-clark is using the react-scripts version and not simply jest.

leerssej
leerssej
~ 3 years ago

Something seems to have changed. Following the transcript precisely above (twice) I get the result below.

● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do: • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/en/configuration.html

Details:

C:\Users\MyUserName\Documents\my-app\src\logo.svg:1 ({"Object <anonymous>":function(module,exports,require,__dirname,__filename,global,jest) ^

SyntaxError: Unexpected token <

 1 | import React, { Component } from 'react';
 2 | import logo from './logo.svg';
   | ^
 3 | import './App.css';
 4 |
 5 | class App extends Component {
 at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
 at Object.<anonymous> (src/App.js:2:1)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 5.507s Ran all test suites. npm ERR! Test failed. See above for more details.

If I comment out the non React imports and hardcode the logo link in, I can get this inital test to run. Unfortunately, the styling and logo disappear. (Looking into jest docs now about getting styling and items imported(/ignored by tests?))

pix-el
pix-el
~ 3 years ago

Looks like we need to configure jest to use babel-jest for transform. More details here:

babel-jest

Following steps fixed it for me:

npm install --save-dev

Create jest.config.js with the following content:

module.exports = {
    "transform": {
        "^.+\\.jsx?$": "babel-jest"
    }
};
Nil Hidalgo
Nil Hidalgo
~ 3 years ago

If you are using create-react-app you should not need to do the jest.config.js changes, .babelrc, nor change package.json https://github.com/facebook/create-react-app/issues/2564