由于窗口未定义，React 测试库失败答案

【问题标题】：React testing library failed because of window undefined由于窗口未定义，React 测试库失败
【发布时间】：2020-03-09 13:53:27
【问题描述】：

我正在使用 react-test-library 当我尝试运行测试时出现错误：

   TypeError: Cannot read property 'apiBaseUrl' of undefined

    > 1 | let baseUrl = window.config.apiBaseUrl;
        |                             ^
      2 | export default baseUrl

这是我的 package.json：

{
    "name": "dstest",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
     ....
    },
    "scripts": {
      "start": "node scripts/start.js",
      "build": "node scripts/build.js",
      "test": "react-scripts test"
    },
    "eslintConfig": {
      "plugins": [
        "react-pug"
      ],
      "extends": [
        "react-app",
        "plugin:react-pug/all"
      ]
    },
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "devDependencies": {
      "@testing-library/react": "^9.5.0",
      "babel-plugin-transform-react-jsx": "^6.24.1",
      "jest-sonar-reporter": "^2.0.0",
      "babel-plugin-transform-react-pug": "^7.0.1"
    },
    "babel": {
      "presets": [
        "react-app"
      ],
      "plugins": [
        "transform-react-pug",
        "transform-react-jsx"
      ]
    },
    "jest": {
      "collectCoverageFrom": [
        "src/**/*.{js,jsx,ts,tsx}",
        "!src/**/*.d.ts",
        "!src/index.tsx",
        "!src/serviceWorker.ts"
      ],
      "coverageReporters": [
        "text",
        "lcov",
        "json"
      ]
    }
  }

这是我的测试文件：

import React from "react";
import { UserName } from "Containers";
import { render } from "@testing-library/react";
import { BrowserRouter as Router } from "react-router-dom";

it("renders without crashing", async () => {
  const wrapper = render(
    <Router>
      <UserName />
    </Router>
  );
  expect(wrapper);
  wrapper.unmount();
});

我在尝试运行测试脚本时遇到了这个错误：

  ● Test suite failed to run

    TypeError: Cannot read property 'apiBaseUrl' of undefined

    > 1 | let baseUrl = window.config.apiBaseUrl;
        |                             ^
      2 | export default baseUrl
      3 |

      at Object.<anonymous> (src/ApiConfig/baseURL.js:1:29)
      at Object.<anonymous> (src/Store/Actions/getData/index.js:1:1)
      at Object.<anonymous> (src/Store/Actions/index.js:2:1)
      at Object.<anonymous> (src/Containers/Form/UserId/index.js:3:1)
      at Object.<anonymous> (src/Containers/index.js:2:1)
      at Object.<anonymous> (src/Containers/Form/UserName/index.test.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.065s

我需要做什么？

【问题讨论】：

这不是未定义的窗口，而是 window.config 如果窗口未定义，它会告诉您它无法读取未定义的配置
所以我需要使用这个配置我怎么能弄清楚这个？

标签： reactjs react-testing-library

【解决方案1】：

我使用酶，但我相信如果你在开玩笑，你可以做这样的事情。

// at the top to save the current window object 
const currentWindowObject = global.window;

在那之后，您需要在测试块中声明一个 beforeAll 来模拟该值，并声明一个 afterAll 来将值保持原样。

  beforeAll(() => {
    delete global.window.config;
    global.window.config = { apiBaseUrl: "your value" };
  });

  afterAll(() => {
    // Set the current window again.
    delete global.window.config;
    global.window = currentWindowObject;
  });

此外，如果您希望该值可用于所有测试并保留它，您可以将其注入setupTests.js 文件（如果使用 react create app）或您放置开玩笑设置的文件中。

// Imports here
global.window.config = { apiBaseUrl: "your value" };

您将在所有测试中都使用它。

【讨论】：

【解决方案2】：

使用新版本的 jsdom，您可以执行以下操作，不会出现打字错误：

import { JSDOM } from 'jsdom';

let windowSpy: any;
beforeEach(() => {
  windowSpy = jest.spyOn(global as any, 'window', 'get');
});
afterEach(() => {
  windowSpy.mockRestore();
});

describe('', () => {
  it ('', () => {
    const { window } = new JSDOM();
    windowSpy.mockImplementation(() => window);
    // now you have `window` in test environment
  });
});

【讨论】：

【解决方案3】：

我遇到了同样的问题，beforeAll、beforeEach 或 jest.spyOn 解决方案没有解决我的问题。我通过在setupTests.js 文件中设置值来修复它。

window.config = { apiBaseUrl: "value" };

//setupTests.js

【讨论】：