Создать приложение React - невозможно установить объект окна перед запуском теста - PullRequest
1 голос
/ 28 мая 2020

Попытка настроить некоторые тесты для компонента в приложении, созданном CRA.

Возникла проблема, при которой тест не запускается из-за того, что импортированный файл полагается на объект окна, который не инициализирован .

Краткий обзор: В public/index.html есть объект, определенный в окне с именем window.config.

<script src="%PUBLIC_URL%/config.js"></script>
<script>
  // THESE PROPERTIES ARE DEFINED IN config.js
  window.config = {
    ENV,
    IDENTITY_URL,
    OIDC_CLIENT_ID,
  };
</script>

Существует файл с именем identity.constants.js, который экспортирует объект, который использует эти переменные окна.

export const IdentityConfig = {
    authority: window.config.IDENTITY_URL,
    client_id: window.config.OIDC_CLIENT_ID,
    ... etc
};

Компонент, который я пытаюсь протестировать, импортирует другой компонент, который полагается на identity.constants.js, показанный выше.

Проблема в том, что тест не запускается и выдает ошибка с указанием window.config - это undefined из файла identity.constants.js.

После прочтения документов CRA я попытался добавить следующий код в src/setupTests.js, чтобы установить объект конфигурации до начала теста, но он кажется, что не удалось выполнить этот код.

global.config = {
  ENV: "development",
  IDENTITY_URL: "identityurl.com",
  OIDC_CLIENT_ID: "i-am-a-clientId",
  ... etc
};

Я ищу способ установить эту переменную окна перед запуском тестов (или лучший способ структурировать то, как я использую переменные окна), поэтому я могу успешно запустить мои тесты.

1 Ответ

0 голосов
/ 28 мая 2020

globa.config определяет глобальную переменную с именем config, вам нужно сначала определить global.window, а затем добавить config как свойство global.window. Кажется, ваша тестовая среда node, если у вас есть jsdom как devDependencies вашего проекта, попробуйте добавить ниже фрагмент кода в свой setupTests.js:

import { JSDOM } from 'jsdom';

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
global.window = jsdom.window;
global.document = jsdom.window.document;

global.window.config = {
  ENV: "development",
  IDENTITY_URL: "identityurl.com",
  OIDC_CLIENT_ID: "i-am-a-clientId",
  ... etc
};

Без jsdom, простое исправление, как показано ниже:

global.window = {
  config: {
    ENV: "development",
    IDENTITY_URL: "identityurl.com",
    OIDC_CLIENT_ID: "i-am-a-clientId",
    ... etc
  }
}
...