使用 jest 时如何设置 jsdom

Question

我正在尝试从 AVA 迁移到 Jest。在AVA中你可以设置

ava.setup

，在其中设置

jsdom

环境。例如，创建 DOM 结构并进行必要的填充（localStorage）。

如何在 Jest 中实现这一点？目前，我在每个测试套件中使用

beforeEach

，这感觉不是最好的解决方案。

Answer 1

好问题。

Jest 实际上附带了

jsdom

并且已经配置了环境。您可以使用

testEnvironment

设置覆盖它。

如果您需要设置环境的更多方面，您可以使用

setupTestFrameworkScriptFile

setting 指向在所有测试运行之前执行的文件。

例如，如果您需要

window.yourVar

在所有测试的窗口上可用，您可以将其添加到您的

package.json

:

"jest": {
    "setupTestFrameworkScriptFile": "tests/setup.js"
}

在测试/setup.js中：

Object.defineProperty(window, 'yourVar', { value: 'yourValue' });

Answer 2

更新2022。版本28默认不再提供jsdom：

从 Jest 28 开始，默认情况下不再提供“jsdom”，请确保单独安装它。

您需要手动安装 jsdom：

# npm
npm install -D jest-environment-jsdom
# yarn
yarn add jest-environment-jsdom

归功于： https://stackoverflow.com/a/72013609/7089048