考虑使用“jsdom”测试环境

Question

我有这个简单的测试：

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 test（刚刚运行jest）时，出现以下错误：

下面的错误可能是由于使用了错误的测试环境导致的，参见 https://jestjs.io/docs/configuration#testenvironment-string。

考虑使用“jsdom”测试环境。

我做错了什么？这在升级之前曾经有效。

Answer 1

在您的package.json, 或jest.config.js/文件中，将该属性jest.config.ts的值更改为。testEnvironmentjsdom

package.json

"jest":{
    "testEnvironment": "jsdom"
}

jest.config.[js|ts]

module.exports = {
    "testEnvironment": "jsdom"
}

玩笑的重要说明>28

如果您使用 jest 28，则需要jest-environment-jsdom通过以下任一方式单独安装：

节点管理：npm i jest-environment-jsdom --save-dev

纱：yarn add -D jest-environment-jsdom

为什么？

默认情况下，jest 使用 testEnvironment node。这本质上使得任何针对浏览器环境的测试都无效。

jsdom是浏览器环境的实现，支持这些类型的 UI 测试。

对于 Jest 版本 28 及更高版本，jest-environment-jsdom已从默认jest安装中删除以减小包大小。

补充阅读

jest test环境文档

Jest 28 重大变更

Answer 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 配置中进行设置来更改整个项目更好。"testEnvironment": "jsdom"通过跳过非 UI 测试的 JSDom 环境初始化，Jest 可以更快地运行测试。事实上，这就是 Jest更改 Jest 27 中默认测试环境的原因。