javascript TypeError：environment.setup 不是 React 测试中的函数

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

提问by arsho

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

我试图实现 Jest 网站中显示的示例：Jest入门。

While running npm teston I was getting the following error:

在运行时npm test，我收到以下错误：

FAIL  src/sum.test.js
  ● Test suite failed to run

    TypeError: environment.setup is not a function

      at node_modules/jest-runner/build/run_test.js:112:23

sum.js:

sum.js：

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

sum.test.js:

sum.test.js：

const sum = require('./sum');

test('adding sum function', () => {
  expect(sum(234,4)).toBe(238);
})

sum.jsand sum.test.jsare an exact copy of the example shown in Getting started with Jest.

sum.js并且sum.test.js是Jest 入门中所示示例的精确副本。

package.json:

package.json：

{
  "name": "jest-demo-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "jest": "^22.0.4"
  }
}

So, how can I get rid of TypeError: environment.setup is not a functionerror?

那么，我怎样才能摆脱TypeError: environment.setup is not a function错误呢？

采纳答案by xor

Jest is included with react-scripts. The error is due to a conflict that arose when you installed Jest in a project started with react-scripts. The "Getting started with Jest" guide expects a 'clean' project.

Jest 包含在 react-scripts 中。该错误是由于在以 react-scripts 启动的项目中安装 Jest 时出现的冲突。“Jest 入门”指南期望一个“干净”的项目。

Simply remove Jest from your (dev)dependencies and it should work.

只需从您的（开发）依赖项中删除 Jest，它应该可以工作。

If you want to use Jest for testing React components (which you probably do), you need to modify your test script in package.jsonto react-scripts test --env=jsdom, as it was.

如果你想用玩笑来测试反应的组分（你可能做的），你需要修改你的测试脚本中package.json来react-scripts test --env=jsdom，因为它是。

回答by arsho

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

基于这个 github 问题：@jest-environment node not working in v22，

I updated the sum.test.jsas:

我将其更新sum.test.js为：

/**
 * @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.

现在我摆脱了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.

第 1 步：我使用create-react-app.

The command: create-react-app demo-app

命令： create-react-app demo-app

package.jsonfile:

package.json文件：

{
  "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 jestis not included in the dependencies.

此文件显示jest未包含在依赖项中。

Step 2:I included sum.jsand sum.test.jsfiles in srcfolder as shown in the official getting started guide.

：第2步我包括sum.js和sum.test.js文件中src所示的官方文件夹中的入门指南。

sum.js:

sum.js：

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

sum.test.js:

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 testcommand without including jestin package.jsonfile. So, this test command uses react-scripts test --env=jsdomas shown in package.json.

第 3 步：我运行yarn test命令而不包含jest在package.json文件中。所以，这个测试命令使用react-scripts test --env=jsdom如图所示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.jsonfile to use jestas test script:

第 4 步：我更新了package.json文件以jest用作测试脚本：

{
  "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 testand the output is:

我再次运行yarn test，输出是：

$ 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)

太长; 未读 (TL;DR)

1. Do not add jestusing yarn add --dev jestor npm install --save-dev jestif you use create-react-appcommand. jestis included in node-modulesof the project if you use create-react-app.

1. 不要添加jestusingyarn add --dev jest或npm install --save-dev jest如果您使用create-react-app命令。jest包括在node-modules如果你使用的项目create-react-app。

From official Jest documentation:

来自官方 Jest 文档：

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.

使用 Create React App 进行设置

如果您刚刚开始使用 React，我们建议您使用 Create React App。它已准备好使用并随 Jest 一起提供！您无需执行任何额外的设置步骤，可以直接进入下一部分。

1. Do not change the test script in package.jsonfile { look at this issue}. Keep the default "test": "react-scripts test --env=jsdom",in that.

2. 不要更改package.json文件 {看看这个问题} 中的测试脚本。保持默认"test": "react-scripts test --env=jsdom",。

回答by thierno

Just remove jestfrom your dev dependencies. To do so, run the following command:

只需jest从您的开发依赖项中删除。为此，请运行以下命令：

npm remove --save-dev jest

回答by tjungChaniago

My issue solve with this:
.
If you have both react-scripts and jest in your package.json, delete jest from it.
Then delete package-lock.json, yarn.lock and node_modules.
Then run npm install(or yarnif you use it). ~Dan Abramov~ . issues #5119.

我的问题解决了这一点：
。
如果 package.json 中有 react-scripts 和 jest，请从其中删除 jest。
然后删除 package-lock.json、yarn.lock 和 node_modules。
然后运行npm install（或yarn如果你使用它）。~丹·阿布拉莫夫~。 问题 #5119。

回答by Leonardo

Add

添加

"jest": {
    "testEnvironment": "node"
  }

to your package.json file, your package.json would look like this:

到您的 package.json 文件，您的 package.json 将如下所示：

{
  "name": "jest-demo-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "jest": "^22.0.4"
  },
   "jest": {
    "testEnvironment": "node"
  }
}

---

---

UPDATE

更新

for the people using create app and having this problem, there are two solutions.

对于使用 create app 并遇到此问题的人，有两种解决方案。

1- update testcommand (or add new one) in package.jsonto jestinstead of react-scripts test, because react-scripts testwill not allow jest options in package.jsonas @Xinyang_Li stated in comments.

1-test将package.json 中的更新命令（或添加新命令）改为jest而不是react-scripts test，因为react-scripts test不会允许package.json 中的jest 选项，如@Xinyang_Li 在评论中所述。

2-if you don't want to change test command in package.json, and use default create-react-app test; remove jest options from packge.json (if exists)

2-如果你不想改变package.json中的test命令，使用默认的create-react-app test；从 packge.json 中删除 jest 选项（如果存在）

 "jest": {
    "testEnvironment": "node"
  }

 "jest": {
    "testEnvironment": "node"
  }

then remove node_modulesand then run npm installto install them all again, and after that your tests should run normally.

然后删除node_modules然后运行npm install重新安装它们，之后你的测试应该正常运行。

回答by FDisk

You should downgrade installed jestto v20.0.4npm install -D [email protected]

你应该降级安装jest到v20.0.4npm install -D [email protected]

回答by Honza Prá?il

This is an older issue but I was facing the same problem. We have react-scriptspackage and it uses Jest version 20.x.xwhich has problems with coverageTreshold. I couldn't use newer react-scriptsversion and the only thing helped was to use yarn resolutions, read more here https://yarnpkg.com/lang/en/docs/selective-version-resolutions/.

这是一个较旧的问题，但我遇到了同样的问题。我们有react-scripts包，它使用 Jest 版本20.x.x，该版本在coverageTreshold. 我无法使用较新的react-scripts版本，唯一有帮助的是使用纱线分辨率，请在此处阅读更多内容https://yarnpkg.com/lang/en/docs/selective-version-resolutions/。