Install Enzyme and Configure Jest

Tyler Clark
InstructorTyler Clark

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 2 years ago

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.

Instructor: [00:00] In this course, I will be using Create React App as my background setup. Create React App comes with a lot of built-in configurations and installed dependencies that we need to get up and running with React Jest and Enzyme.

[00:12] If you're not using Create React App, you need to install as dev dependencies, Jest, babel-jest, babel-core, babel/preset-env, and babel/preset-react. Once our package is installed, we need to create a new file for our babelrc. We'll paste in our presets-env and react so that we can use ES6 and React and setup our test.

[00:35] Next, we need to make sure we have a script for actually running our test. Again, Create React App has this for us. However, one can simply just put Jest here, and that will our test as well.

[00:48] Also, if you [inaudible] Create React App, the Jest doc goes the detail on how to get it configured with Webpack, including how to handle select assets, CSS modules, and working with Webpack 2.

[01:00] With Jest configured, we can install as a dev dependency enzyme. Once this finishes, we will see it added to our package JSON.

Krishna Pradhan
Krishna Pradhan
~ 4 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
~ 4 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
~ 4 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
~ 4 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
~ 4 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