using jest vs react-scripts test

Question

js and react newbie...playing around with testing frameworks...here's the code:

    import React from 'react';
  //  import CheckboxWithLabel from '../CheckboxWithLabel';
    import {shallow} from 'enzyme'; //not installed...

    //var x = require ('../CheckboxWithLabel.js');


    test('CheckboxWithLabel changes the text after click', () => {
  const checkbox = shallow(
    <CheckboxWithLabel labelOn="On" labelOff="Off" />
  );
  expect(checkbox.text()).toEqual('Off');
  checkbox.find('input').simulate('change');
  expect(checkbox.text()).toEqual('On');
});

The react-scripts test error is: Cannot find module 'enzyme' from 'checkboxWithLabel-test.js'

While the jest error is:

Jest encountered an unexpected token

    SyntaxError: /Users/shriamin/Development/js_prj_react_django_etc/jest_react_demo/my-app/src/__tests__/checkboxWithLabel-test.js: Unexpected token (12:4)

      10 |  test('CheckboxWithLabel changes the text after click', () => {
      11 |   const checkbox = shallow(
    > 12 |     <CheckboxWithLabel labelOn="On" labelOff="Off" />
         |     ^
      13 |   );
      14 |   expect(checkbox.text()).toEqual('Off');
      15 |   checkbox.find('input').simulate('change');

i have no idea why jest would throw this error...react-scripts test makes sense to me since enzyme is not installed....please tell me does jest suck or am i doing something wrong configuring jest (installed via npm and update package.json).

NOTE: i don't have babel installed...i don't know what that is yet.

thanks

Answer 1

You arrived at the answer yourself. To use jest your tests need to go through babel for the runner to understand react syntax. take a look at the babel-doc to understand it at greater detail. it's just a transformation tool that transforms fancy syntax into something javascript understands. install the following plugins and presets.

Presets

npm i --save @babel/preset-env
npm i --save @babel/preset-react

Plugins

npm install --save babel-plugin-transform-export-extensions

in your .babelrc add the following lines:

{
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
        "transform-export-extensions",
      ],
      "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
    }
  }
}

Now try running jest on the command-line from your project directory to make sure your tests are configured correctly.

react-scripts is a preconfigured set of commands that come out of the box with create-react-app if you want to use that instead of jest command, check here.

react-scripts expects your tests folder location to follow a certain convention. this is probably why the tests weren't getting fetched when the react-scripts test command was run out of the box.