#reactjs #react-redux #react-testing-library
Вопрос:
Я следую документам для библиотеки тестирования реакции, чтобы узнать, отображается ли элемент с data-testid атрибутом или нет.
Библиотека тестирования реакции не может найти элемент, даже если он существует.
тест
test('Renders step based on the active step', () => {
render(<RenderStep />, { initialState: { implOnboard: initialState } });
});
expect(screen.getByTestId('step-1')).toBeDefined(); // 👉 THROWS ERROR ❌
}
компонент
// redux
const { activeStep } = useSelector((state) => state.implOnboard);
const renderStep = () => {
switch (activeStep) {
case 1:
console.log('Rendering this 🔥'); // 👈 THIS IS GETTING LOGGED TOO!
return (
<div data-testid="step-1">
<StepOne />
</div>
);
case 2:
return (
<div data-testid="step-2">
<StepTwo />
</div>
);
}
};
return <React.Fragment>{renderStep()}</React.Fragment>;
ошибка
TestingLibraryElementError: Unable to find an element by: [data-testid="step-1"]
Комментарии:
1. В свой тестовый файл просто добавьте это
console.log(screen.debug(null, Infinity));перед ожиданием и проверьте, правильно ли вы видите, как DOM печатается .2. Есть ли причина
expect, по которой заявление находится за пределамиtest()блока?
Ответ №1:
Пожалуйста, используйте queryByTestId вместо getByTestId этого для этого случая. Это сработает.
Комментарии:
1. Большое спасибо!!! Ты спас меня. Я потратил на это два дня, не знаю, почему это происходит именно так.
2. И меня тоже спас. Спасибо!!
3. Есть ли причина, по которой он работает с queryByTestId, а не с getByTestId?
Ответ №2:
Добавляя к ответу Елены, нам нужно использовать queryByTestId , потому что, queryByTestId возвращает null значение, а не выдает ошибку в отличие getByTestId от . Вот изображение, которое объясняет, когда следует использовать различные методы.
