如何在使用jest时设置jsdom

Question

我正在尝试从AVA迁移到Jest.在AVA中,您可以设置环境中的ava.setup设置jsdom.例如,创建DOM结构并执行必要的polyfill(localStorage).

我如何在Jest中实现这一目标？目前,我正在使用beforeEach每个测试套件,这不是最好的解决方案.

提前致谢!

Answer 1

好问题.

Jest实际上附带了jsdom并且已经配置了环境(您可以使用该testEnvironment 设置覆盖它).

如果您需要设置环境的更多方面,则可以使用该setupTestFrameworkScriptFile 设置指向在所有测试运行之前执行的文件.

例如,如果您需要window.yourVar在窗口中显示所有测试,则可以将其添加到package.json:

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

在tests/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