时间戳

首页 > 解决方案 > 由于窗口未定义，React 测试库失败

reactjs - 由于窗口未定义，React 测试库失败

问题描述

当我尝试运行测试时，我正在使用 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

我需要做什么？

标签： reactjsreact-testing-library

解决方案

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

// 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）或您放置 jest 设置的文件中。

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

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

推荐阅读