Реактивная библиотека тестирования не выполнена из-за неопределенного окна

Question

Я использую реагирующую библиотеку при попытке запустить тест, я получаю сообщение об ошибке:

   TypeError: Cannot read property 'apiBaseUrl' of undefined

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

вот мой пакет. 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

что мне нужно сделать?

Answer 1

С новой версией 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
  });
});

Answer 2

Я использую энзим, но я считаю, что если вы используете Jest, вы можете сделать что-то вроде этого.

// 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 (если с помощью приложения create create) или файла, в который вы положили настройки jest.

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

И это будет доступно во всех ваших тестах.