Install Enzyme and Configure Jest
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.
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.
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?))
Looks like we need to configure jest to use babel-jest for transform. More details here:
Following steps fixed it for me:
npm install --save-dev
Create jest.config.js with the following content:
module.exports = {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
};
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
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