Jest测试失败,窗口未定义

Question

我正在尝试开始学习最先进的Web开发学习React/Redux.

现在我坚持让测试运行.出于某种原因,jest失败了

Task :frontend:test 
yarn jest v1.0.2
$ "/Users/gunnar/git/app.oakstair.se/frontend/node_modules/.bin/jest" 
FAIL src/containers/App/App.test.js
  ? Test suite failed to run

 ReferenceError: window is not defined

  at Object.<anonymous> (config/polyfills.js:18:1)
  at next (native)
  at process._tickCallback (internal/process/next_tick.js:109:7)

谷歌搜索了一段时间没有任何成功......

Answer 1

在你的package.json中添加window类似全局的东西

"jest": {
  "verbose": true,
  "preset": "react-native",
  "setupFiles": ["./jest/setup.js"],
  "testRegex": "(/tests/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|lottie-react-native)"
  ],
  "globals": {
    "window": {}
  }
}

Answer 2

我有同样的问题,我不相信修改全局变量是这样做的方法.问题是因为在我的jest配置中,我已经testEnvironment设定了node它应该的时间jsdom.对我来说,这个设置位于package.json中,由react starter app定义.

Answer 3

2021 (Jest 27)

Jest 的testEnvironment默认值曾经是jsdom. 它已更改为node最近从版本 27 开始。

您可以testEnvironment: 'jsdom'在配置文件中设置以继续使用 JSDOM。

但是'node'似乎要快得多，因此您应该尽可能模拟浏览器 API。

https://jestjs.io/blog/2021/05/25/jest-27

Answer 4

npm i jest-environment-jsdom

文件index.test.tsx

/**
 * @jest-environment jsdom
 */

Answer 5

如果您想保持testEnvironment设置为node，您可以window在 jest.config.js/ts 中配置一个全局变量，然后模拟您在测试用例中需要的内容。

只要您不需要任何高级功能，它就可以正常工作。它与之前一些高评价的答案相同，但包括一些示例。

import type {Config} from '@jest/types';

const config: Config.InitialOptions = {
  ...jestConfig,
  testEnvironment: "node",
  globals: {
    window: {
     location: {}
    }
  }
};

export default config;

SomeTestCase.spec.ts

test('Is correct href', () => {
  window.location.href = 'https://somedomain.com';
  expect(window.location.href).toBe('https://somedomain.com');
})