Install Enzyme and Configure Jest

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

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:

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

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