在package.json或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 i jest-environment-jsdom --save-dev
Yarn：yarn add -D jest-environment-jsdom
为什么？
默认情况下，jest使用node测试环境，这实际上使得任何针对浏览器环境的测试都无效。
jsdom是浏览器环境的实现，它支持这些类型的UI测试。
对于Jest版本28和更高版本，jest-environment-jsdom已从默认jest安装中删除，以减小软件包大小。

额外阅读

jest测试环境文档
笑话28打破变化

这可以通过在每个测试文件的开头添加一个@jest-environment docblock来解决。例如：

/** @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文件，这通常比changing the entire project更好，在你的package.json或Jest配置中设置"testEnvironment": "jsdom"。通过跳过为非UI测试初始化JSDom环境，Jest可以更快地运行你的测试。事实上，这就是为什么Jest在Jest 27中改变了默认测试环境。

默认情况下，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

试试这个。

module.exports = {
testEnvironment: 'jsdom',

}