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

*i don't have babel installed* - you don't have to, that's what react-scripts (create-react-app) basically does itself. This likely should be checkboxWithLabel-test.jsx and not checkboxWithLabel-test.js — Estus Flask, Nov 15 '18 at 15:25
there are multiple problems in this script. It just seems the order in which they are dealt with is not intuitive to me. Yes there is a second problem with how CheckboxWithLabel is defined, however the missing enzyme module at top seems like it would have precedence. I guess I just don't understand that... — blue_ego, Nov 15 '18 at 16:53
I guess the order doesn't matter. All of them should be solved (I see only two). Rename test file. If you don't have enzyme installed, install it. Consider updating the question if problems persist. — Estus Flask, Nov 15 '18 at 17:21
Consider providing a way for other users to replicate the problem, see https://stackoverflow.com/help/mcve . In case of the whole project this could be a repo. — Estus Flask, Nov 15 '18 at 17:36
i've got the script working with react's test runner (installed enzyme & fixed the CheckboxWithLabel class declaration) however it still is throwing the exact same error using jest, this proves to me that something about jest is not awesome. yes, it seems jest needs further configuration, but shouldn't it at least throw a different error? — blue_ego, Nov 15 '18 at 17:57
Jest is awesome but it wasn't configured properly. The error means that JSX syntax isn't transpiled. I cannot understand the case. How did you come up with malfunctioning setup like this one? create-react-app is supposed to generate a setup with react-scripts that works out of the box. It already uses Jest. If you're trying to set up Jest in addition to react-scripts, you shouldn't do this. — Estus Flask, Nov 15 '18 at 18:06
thanks...i started another project using create-react-app..the only thing i change is the package.json. test: react-scripts test -> test: jest. this breaks the test (liek the example above) when used with npm test...that's all. why? — blue_ego, Nov 15 '18 at 18:45
Was there a reason to do this? react-scripts is basically preconfigured setup, this includes preconfigured Jest. `react-scripts test` runs `jest` with specific configuration. When you run `jest` directly, it lacks needed configuration. — Estus Flask, Nov 15 '18 at 18:48
i have no idea, i'm new to react / js / jest. i was following directions of a tutorial that said update package.json to scripts { test: jest} — blue_ego, Nov 15 '18 at 18:58
I assume this was a tutorial that didn't imply that you already use CRA. In case it implied that, I'd say that's really bad tutorial. — Estus Flask, Nov 15 '18 at 19:06

Pranavan Maru · Accepted Answer · 2019-09-12T12:06:37.133

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.

a confusing question in the first place...it appears babel is required for jest to work — blue_ego, Sep 28 '20 at 19:59

score 4 · Answer 2 · answered Nov 15 '18 at 19:02

4

in package.json change

 "scripts": {
    "test": "jest",
  },

to the following:

 "scripts": {
    "test": "react-scripts test",
  },

i.e. don't change to jest in the first place

answered Nov 15 '18 at 19:02

blue_ego

1
1
4
12

i found this (https://stackoverflow.com/questions/35756479/does-jest-support-es6-import-export) it tells me how to solve the problem with import/export and jest – blue_ego Nov 16 '18 at 20:07
4

Thanks, Does 'react-scripts test' uses Jest internally? – Jay Feb 11 '20 at 13:49
17

The question is about using one vs the other. "Don't use the other" isn't informative. – reergymerej Sep 03 '20 at 15:59

anonkey · Answer 3 · 2021-03-15T17:51:35.890

0

The error described here seem to be jsx that isn't interpreted, isn't your test file extension js instead of jsx ?

edited Mar 15 '21 at 17:51

answered Feb 15 '21 at 09:40

anonkey

102
4

This seems like a wild guess, you should ask OP what the file extension name is instead – Luke_ Feb 15 '21 at 11:47
Why wild ? Error is on the opening '<' of jsx tag it's not guessing. For the extension i start with "maybe" – anonkey Mar 09 '21 at 21:27
1

If youre unsure, you shouldve placed a comment asking for the file extension first. I came across your answer when going trough the SO review queue and the word 'maybe' triggered me into placing that reaction. I believe answers should not contain such guesses as answers – Luke_ Mar 10 '21 at 12:58

using jest vs react-scripts test

3 Answers3