考虑使用“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} />)
  })
})

我有一个jest.config.json与此内容

{
  "setupFilesAfterEnv": [
    "<rootDir>/lib/settings/setupTests.ts"
  ]
}

而在我的setupTests.ts I have

import '@testing-library/jest-dom'

当我跑步时npm run test（刚刚运行jest），我收到以下错误：

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

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

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

In your package.json, or jest.config.js/jest.config.ts文件，更改值testEnvironment财产给jsdom.

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: yarn add -D jest-environment-jsdom

Why?

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

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

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

补充阅读

jest test环境文档 https://jestjs.io/docs/configuration#testenvironment-string

Jest 28 重大变更 https://jestjs.io/blog/2022/04/25/jest-28#breaking-changes