提问人：Rodrigo 提问时间：9/18/2021 更新时间：2/2/2023 访问量：81494
考虑使用“jsdom”测试环境
Consider using the "jsdom" test environment
问：
我有一个简单的测试：
import React from 'react'
import { render } from '@testing-library/react'
import Button from '.'
describe('Button', () => {
it('renders button without crashing', () => {
const label = 'test'
render(<Button label={label} />)
})
})
我有一个这个内容jest.config.json
{
"setupFilesAfterEnv": [
"<rootDir>/lib/settings/setupTests.ts"
]
}
在我的身上，我有setupTests.ts
import '@testing-library/jest-dom'
当我运行（刚刚运行）时，我收到以下错误：npm run testjest
以下错误可能是由于使用了错误的测试环境导致的，请参阅 https://jestjs.io/docs/configuration#testenvironment-string。
考虑使用“jsdom”测试环境。
我做错了什么？这曾经在升级之前起作用。
答：
178赞
Moistbobo
9/18/2021
#1
在 或 / 文件中，将属性的值更改为 。package.jsonjest.config.jsjest.config.tstestEnvironmentjsdom
package.json
"jest":{
"testEnvironment": "jsdom"
}
jest.config.[js|ts]
module.exports = {
"testEnvironment": "jsdom"
}
开玩笑的重要提示 >28
如果您使用的是 jest 28，则需要通过以下任一方式单独安装：jest-environment-jsdom
npm：npm i jest-environment-jsdom --save-dev
纱：yarn add -D jest-environment-jsdom
为什么？
默认情况下，jest 使用 testEnvironment。这实质上使任何针对浏览器环境的测试无效。node
jsdom是浏览器环境的实现，它支持这些类型的 UI 测试。
对于 Jest 版本 28 及更高版本，已从默认安装中删除以减小包大小。jest-environment-jsdomjest
补充阅读
评论
0赞
Betty
11/9/2022
你的回答帮助了我。谢谢。但是，您提供的是 json 格式。若要使用该代码段，必须将文件名更改为 。jest.config.[js|ts]jest.config.json
0赞
Moistbobo
11/9/2022
@Betty使 js/ts 版本更加明确
1赞
Michael Lynch
3/16/2023
浏览器中的玩笑测试是否也需要？还是该包只是添加了本机没有的额外断言？@testing-library/jest-domjest-environment-jsdom
0赞
Moistbobo
3/16/2023
@MichaelLynch 如果您使用的是测试库套件，我相信这是一个可选包，因此不需要编写基本的 jest 测试。你对它的评估，添加额外的断言是正确的。
20赞
Josh Kelley
3/24/2022
#2
这可以通过在文件的开头添加一个文档块来解决。例如：@jest-environment
/** @jest-environment jsdom */
import React from 'react'
import { render } from '@testing-library/react'
import Button from '.'
describe('Button', () => {
it('renders button without crashing', () => {
const label = 'test'
render(<Button label={label} />)
})
})
如果您的项目混合了 UI 和非 UI 文件，这通常比通过在 package.json 或 Jest 配置中设置来更改整个项目更可取。通过跳过初始化非 UI 测试的 JSDom 环境，Jest 可以更快地运行测试。事实上，这就是 Jest 在 Jest 27 中更改默认测试环境的原因。"testEnvironment": "jsdom"
评论
0赞
redochka
3/16/2023
/** @jest环境 jsdom */ 放在文件顶部时有效，但放在测试方法上方时不起作用。你知道为什么吗？
0赞
Josh Kelley
3/17/2023
@redochka - 它只能基于每个文件进行更改，而不能基于每个方法进行更改。查看 jestjs.io/docs/configuration#testenvironment-string
0赞
Praveen Saboji
5/9/2022
#3
默认情况下，testEnvironment 的值是 node，它在 node.js 环境中运行所有测试用例，但 js-dom 提供类似浏览器的环境。您甚至可以添加文件特定的值，而不是添加 JSDOM 值，如下所示。
/**
* @jest-environment jsdom
*/
// the above comment helps
test('use jsdom in this test file', () => {
const element = document.createElement('div');
expect(element).not.toBeNull();
});
我们甚至可以添加测试文件特定的环境，请参考此链接。
https://jestjs.io/docs/configuration#testenvironment-string
-1赞
Mone
2/2/2023
#4
试试这个。
module.exports = {
testEnvironment: 'jsdom',
}
评论