25

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

Improve this question
11
  • 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 Commented Nov 15, 2018 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... Commented Nov 15, 2018 at 16:53
  • 1
    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. Commented Nov 15, 2018 at 18:06
  • 1
    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. Commented Nov 15, 2018 at 18:48
  • 1
    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. Commented Nov 15, 2018 at 19:06

3 Answers 3

Reset to default
8

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

a confusing question in the first place...it appears babel is required for jest to work
3

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

Improve this answer

3 Comments

i found this (stackoverflow.com/questions/35756479/…) it tells me how to solve the problem with import/export and jest
Thanks, Does 'react-scripts test' uses Jest internally?
The question is about using one vs the other. "Don't use the other" isn't informative.
0

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

Improve this answer

3 Comments

This seems like a wild guess, you should ask OP what the file extension name is instead
Why wild ? Error is on the opening '<' of jsx tag it's not guessing. For the extension i start with "maybe"
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.