Я работаю над проектом с использованием 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;
Я надеюсь, что испытание будет пройдено!
Спасибо @HemaNandagopal! Но никаких изменений после того, как я сделал то, что ты сказал мне :\
Что находится в футере?
Я не думаю, что вы должны видеть это сообщение, если что-то в Footer
не использует компонент Material-UI. Основываясь на сообщении (которое, как я полагаю, существует только в v4, поэтому я предполагаю, что это то, что вы используете), я ожидаю, что Footer
использует Material-UI Button
или что-то еще, что использует ButtonBase
.
О, @RyanCogswell !! Вы правы, я использую Material UI
в Footer
, я пропустил это. Есть ли у вас какие-либо идеи, которые могут помочь решить эту проблему?
Я предполагаю, что вы используете бета-версию v4. Я думаю, если вы обновитесь до rc.0 (выпущенного на этой неделе), это должно быть исправлено.
Действительно, спасибо за это отличное решение, я только что попробовал это до вашего комментария, и это решило проблему: D
Проблема была с версией пакета Material UI. Я использовал v4.0.0-beta.2
, но теперь я обновил его до v4.0.0-rc.0
, и это решило проблему, и все тесты прошли.
Еще одно замечание: я использовал материальный пользовательский интерфейс в своем компоненте Footer
. Таким образом, проблема будет показана на компоненте, на котором я использую компоненты Material UI.
Редактировать:
Вышла новая версия: v4.0.1
Попробуйте также импортировать весь материал Ui в свои тестовые примеры. Также попробуйте проверить, отображается ли компонент с помощью console.info(window.debug(story)) над линией ожидания в тестовом примере.