Не могу проверить подключенный компонент - PullRequest
Новая
       14

Не могу проверить подключенный компонент

1 голос
/ 07 апреля 2020

У меня есть следующая проблема: перед каждым тестом я создаю контейнер 

const container = shallow(<Provider store={mockStore}><ReportButton{...mockProps}/></Provider>).dive();

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

В снимке отображается сам компонент, но не внутренняя разметка. 

<ReportButton
  category={Array []}
  count={100}
  dataId=""
  filter={Object {}}
  fullReport={false}
  isEmpty={false}
  loading={false}
  period_tariff_is_active={true}
  type=""
/>

И я просто не могу попасть внутрь компонента.

Одно простое решение: как Redux DOCS посоветовал, тестирование компонента без переноса в провайдера. Итак, вам просто нужно добавить именованный экспорт для вашего компонента, как это сделано ниже 

export default connect(mapStateToProps, mapDispatchToProps)(ReportButton);
export {ReportButton};

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

Но если вы используете перехваты response-redux (useSelect например), тогда этот трюк не будет работать, потому что ваш компонент будет автоматически подключен. И вы будете экспортировать компонент так: 

export default ReportButton;

Итак, проблема вернулась. И я не знаю, как это исправить.

Список используемых пакетов: 

"react": "^16.9.0",
"redux": "^4.0.4",
"react-redux": "^7.1.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",

1 Ответ

0 голосов
/ 08 апреля 2020

Я проверил Custom провайдера с ферментом. И тест выглядел так: 

wrapper = Enzyme.shallow(
      <StorageProvider storage={storageMock}>
        <StorageContext.Consumer>
          {(storage: StorageService | null): React.ReactElement => 

            <HelperComponent storage={storage} />}

        </StorageContext.Consumer>
      </StorageProvider>,
    );

expect(
  wrapper
    .dive()
    .find(StorageContext.Consumer)
    .dive()
    .find(HelperComponent),
  ).toHaveLength(1);

Так что вы можете попробовать использовать .dive .

Еще одно решение, которое я могу предложить, это тестирование с использованием @testing-library/react так как на мой взгляд проще и интереснее протестировать поведение компонента, что и конкретная реализация.

...