TypeError: environment.setup is not a function in React Testing

后端 未结 7 1802
伪装坚强ぢ
伪装坚强ぢ 2021-02-12 08:44

I was trying to implement the example shown in Jest website: Getting started with Jest.

While running npm test on I was getting the following error:

<
相关标签:
7条回答
  • 2021-02-12 09:05

    Based on this github issue: @jest-environment node not working in v22,

    I updated the sum.test.js as:

    /**
     * @jest-environment node
     */
    
    const sum = require('./sum');
    
    test('adding sum function', () => {
      expect(sum(234,4)).toBe(238);
    })
    

    Now I got rid of the TypeError: environment.setup is not a function.

    Output:

    PASS  src/sum.test.js
      ✓ adding sum function (2ms)
    
    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total
    Snapshots:   0 total
    Time:        0.438s
    Ran all test suites.
    

    Updated

    Reading several answers, today I recreated the scenario.

    Step 1: I created a new project using create-react-app.

    The command: create-react-app demo-app

    package.json file:

    {
      "name": "demo-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-scripts": "1.1.4"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    }
    

    This file shows that jest is not included in the dependencies.

    Step 2: I included sum.js and sum.test.js files in src folder as shown in the official getting started guide.

    sum.js:

    function sum(a, b) {
      return a + b;
    }
    module.exports = sum;
    

    sum.test.js:

    const sum = require('./sum');
    
    test('adds 1 + 2 to equal 3', () => {
      expect(sum(1, 2)).toBe(3);
    });
    

    Step 3: I ran yarn test command without including jest in package.json file. So, this test command uses react-scripts test --env=jsdom as shown in package.json.

    Output of the test:

    PASS  src/sum.test.js
    PASS  src/App.test.js
    
    Test Suites: 2 passed, 2 total
    Tests:       2 passed, 2 total
    Snapshots:   0 total
    Time:        0.594s, estimated 1s
    Ran all test suites related to changed files.
    

    Step 4: I updated the package.json file to use jest as test script:

    {
      "name": "demo-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-scripts": "1.1.4"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "jest",
        "eject": "react-scripts eject"
      }
    }
    

    Again I ran yarn test and the output is:

    $ jest
     PASS  src/sum.test.js
     FAIL  src/App.test.js
      ● Test suite failed to run
    
        /<PATH>/demo-app/src/App.test.js: Unexpected token (7:18)
             5 | 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 passed, 2 total
    Tests:       1 passed, 1 total
    Snapshots:   0 total
    Time:        0.645s, estimated 1s
    Ran all test suites.
    

    Too Long; Did not Read (TL;DR)

    1. Do not add jest using yarn add --dev jest or npm install --save-dev jest if you use create-react-app command. jest is included in node-modules of the project if you use create-react-app.

    From official Jest documentation:

    Setup with Create React App

    If you are just getting started with React, we recommend using Create React App. It is ready to use and ships with Jest! You don't need to do any extra steps for setup, and can head straight to the next section.

    1. Do not change the test script in package.json file { look at this issue }. Keep the default "test": "react-scripts test --env=jsdom", in that.
    0 讨论(0)
提交回复
热议问题