Jest-тестирование не удалось: следует использовать Material-UI для всех реагирующих компонентов.

Я работаю над проектом с использованием React, я использую Material-UI только для компонентов, содержащих формы. Когда я запускаю тест, компоненты с формами (которые используют материальный пользовательский интерфейс) проходят успешно, но проблема с компонентами в том, что в них нет форм, поэтому он не использует какие-либо материальные компоненты пользовательского интерфейса, тест терпит неудачу!

Когда я запускаю тест, он не проходит эти компоненты и показывает:

  ● Natural

    Material-UI: expected an Element but found null. Please check your console for additional warnings and try fixing those. If the error persists please file an issue.

       5 | 
       6 | test('Natural', () => {
    >  7 |   const story = renderer.create(<BrowserRouter> <Story /> </BrowserRouter>).toJSON();
         |                          ^
       8 |   expect(story).toMatchSnapshot();
       9 | });
      10 | 

Это мой тестовый код:

import React from 'react';
import renderer from 'react-test-renderer';
import { BrowserRouter } from 'react-router-dom';
import Story from './index';

test('Natural', () => {
  const story = renderer.create(<BrowserRouter> <Story /> </BrowserRouter>).toJSON();
  expect(story).toMatchSnapshot();
});

И это мой код компонентов:

import React, { Fragment } from 'react';
import Footer from '../Common/Footer';

const Story = () => {
  return (
    <Fragment>
      <main>
        <h1>Hello Story page!</h1>
      </main>
      <Footer />
    </Fragment>
  );
};

export default Story;

Я надеюсь, что испытание будет пройдено!

Попробуйте также импортировать весь материал Ui в свои тестовые примеры. Также попробуйте проверить, отображается ли компонент с помощью console.log(window.debug(story)) над линией ожидания в тестовом примере.

Hema Nandagopal 22.05.2019 15:09

Спасибо @HemaNandagopal! Но никаких изменений после того, как я сделал то, что ты сказал мне :\

Muhammad Al-Shareef 22.05.2019 15:20

Что находится в футере?

Ryan Cogswell 22.05.2019 16:28

Я не думаю, что вы должны видеть это сообщение, если что-то в Footer не использует компонент Material-UI. Основываясь на сообщении (которое, как я полагаю, существует только в v4, поэтому я предполагаю, что это то, что вы используете), я ожидаю, что Footer использует Material-UI Button или что-то еще, что использует ButtonBase.

Ryan Cogswell 22.05.2019 18:45

О, @RyanCogswell !! Вы правы, я использую Material UI в Footer, я пропустил это. Есть ли у вас какие-либо идеи, которые могут помочь решить эту проблему?

Muhammad Al-Shareef 22.05.2019 23:26

Я предполагаю, что вы используете бета-версию v4. Я думаю, если вы обновитесь до rc.0 (выпущенного на этой неделе), это должно быть исправлено.

Ryan Cogswell 22.05.2019 23:35

Действительно, спасибо за это отличное решение, я только что попробовал это до вашего комментария, и это решило проблему: D

Muhammad Al-Shareef 22.05.2019 23:57
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
7
226
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема была с версией пакета Material UI. Я использовал v4.0.0-beta.2, но теперь я обновил его до v4.0.0-rc.0, и это решило проблему, и все тесты прошли.

Еще одно замечание: я использовал материальный пользовательский интерфейс в своем компоненте Footer. Таким образом, проблема будет показана на компоненте, на котором я использую компоненты Material UI.


Редактировать:

Вышла новая версия: v4.0.1

Другие вопросы по теме