Тесты React Typescript — целевой контейнер не является элементом DOM

Я новичок в тестировании приложений React/Typescript.

команда (псевдоним для react-scripts test):

yarn test

выход:

 FAIL  src/containers/pages/Feature/Feature.test.tsx
  ● Test suite failed to run

    Target container is not a DOM element.

      17 | const { store, persistor } = configureStore(history, initialState);
      18 | 
    > 19 | ReactDOM.render(
         |          ^
      20 |   <Provider store={store}>
      21 |     <PersistGate loading={null} persistor={persistor}>
      22 |       <ConnectedRouter history={history}>

      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:27596:13)
      at Object.render (src/index.tsx:19:10)

простой тестовый код:

import * as React from 'react';
import { create } from 'react-test-renderer';
import Feature from "./Feature";

describe('Feature page component', () => {
  test('matches the snapshot', () => {
    const feature = create(
      <Feature />,
    );
    expect(feature.toJSON()).toMatchSnapshot();
  });
});

Файл src/index.tsx на самом деле содержит вызов ReactDOM.render(), который не прошел тесты, но какая рабочая альтернатива?

Примечание: само приложение работает нормально, просто не запускается в тестовом режиме.


в файле src/index.tsx у меня есть:

export const history = createBrowserHistory({
  basename: '/admin',
});
const initialState: StoreState = (undefined as unknown) as StoreState;
const { store, persistor } = configureStore(history, initialState);

а потом в сервисы и саги импортирую history и store из index.tsx. может ли это быть проблемой, вызывающей сбой тестов?


Я попытался извлечь history и store в отдельный файл (как предложили комментаторы). Теперь приведенный выше код находится внутри src/initialState.ts.

  • Хорошие новости: ошибка «Целевой контейнер не является элементом DOM» исчезла!
  • Плохая новость: я получаю новую ошибку (которая может быть независимой проблемой, поэтому выделена в отдельный вопрос)

person naXa    schedule 09.06.2020    source источник
comment
похоже, вы объявляете Feature....   -  person Daniel A. White    schedule 11.06.2020
comment
похоже, что-то пытается отобразить ваш index.tsx....   -  person Daniel A. White    schedule 11.06.2020
comment
@DanielA.White, извините, изменил Feature на feature в вопросе.   -  person naXa    schedule 11.06.2020
comment
Что вы сейчас ищете для тестирования? В общем, вы не будете тестировать index.ts, который отображает ваше приложение в dom. вы либо протестируете все внутри своего метода React.render, так как это произойдет и в вашем тесте. Компоненты реакции в ваших тестах будут отображаться в виртуальном доме.   -  person takethefake    schedule 11.06.2020
comment
@DanielA.White добавил подробности в конец вопроса.   -  person naXa    schedule 11.06.2020
comment
@takethefake функциональный компонент React с именем Feature. это страница, состоящая из других компонентов.   -  person naXa    schedule 11.06.2020
comment
@naXa, содержит ли компонент Feature в настоящее время внутри метод ReactDOM.render?   -  person takethefake    schedule 11.06.2020
comment
@takethefake нет, это не так. Поиск по файлам показывает, что метод ReactDOM.render присутствует только в одном месте - src/index.tsx.   -  person naXa    schedule 11.06.2020
comment
@naXa, мой ответ решает вашу проблему или у вас есть дополнительные вопросы?   -  person takethefake    schedule 11.06.2020
comment
@takethefake Я не уверен. Может быть, это решает, а может, просто переводит проблему на другой уровень. дайте мне 10 минут, чтобы добавить новые детали к вопросу.   -  person naXa    schedule 11.06.2020
comment
@takethefake, пожалуйста, взгляните еще раз   -  person naXa    schedule 11.06.2020
comment
@naXa это совсем другой вопрос, пожалуйста, примите мой ответ и создайте новый вопрос для ошибки теста amcharts, но не стесняйтесь пинговать меня!   -  person takethefake    schedule 11.06.2020
comment
@takethefake согласен, без проблем. Задам новый вопрос, но сначала нужно поискать возможные дубликаты.   -  person naXa    schedule 11.06.2020
comment
@takethefake новый вопрос: Обнаружен неожиданный токен в импортированном файле.   -  person naXa    schedule 12.06.2020


Ответы (1)


Проблема, которая сейчас возникает в вашем тесте, заключается в том, что вы хотите протестировать компонент, который импортирует что-то из index.tsx. Когда вы импортируете из index.tsx, также вызывается ReactDOM.render, и ваши тесты терпят неудачу.

Не импортируйте ничего из index.tsx и переместите свою логику, которую вы определили туда, в отдельный файл.

В общем, у вас будет индексный файл для вашего приложения, например: index.tsx, который импортирует ваш App.tsx и просто заботится о рендеринге компонента React в dom с ReactDOM.render.

В App.tsx вы должны определить все компоненты, такие как Provider, PersistGate или даже Feature.

когда вы тестируете свой компонент, вы хотите быть уверены, что он не включает ReactDOM.render, потому что то, что вы делаете при тестировании, — это рендеринг тестируемого компонента внутри виртуального дома, и, к сожалению, это конфликтует с ReactDOM.render

Я привел пример того, как настроить нечто подобное в файле коды

В настоящее время я предпочитаю тестировать компоненты с помощью @testing-library/react вместо react-test-renderer, которая также стала библиотекой тестирования по умолчанию с create-react-app.

person takethefake    schedule 11.06.2020