Поймите ошибку с Jest, Enzyme и React с использованием содержит

Question

Шаблон для проверки того, содержит ли компонент React что-то с Enzyme + Jest, выглядит следующим образом:

expect(shallow(<Field title="hello" />).contains(<p id="hello"></p>)).toBe(true);

Основная проблема, с которой я сталкиваюсь в этом коде, заключается в том, что я понятия не имею, чтоПроблема в том, если ожидание не удается.Поскольку он использует шаблон «ожидаем, что логическое значение будет логическим», единственная ошибка, которую я получаю:

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

Это не очень помогает.Есть ли способ получить более точную ошибку при тестировании, если элемент React содержит что-то?

Answer 1

Да, есть больше способов проверить, присутствует ли элемент в компоненте.И если ваш тестовый случай не пройден, вы можете отладить оболочку, чтобы проверить, что пошло не так..debug () не будет точно определять ошибку, но я думаю, что это сделает отладку очень простой, поскольку вы получаете то, что отрисовывается с помощью shallow / mount.

Следующая команда поможет вам отладить оболочку.

const wrapper = shallow(<Field title="hello" />);
console.log(wrapper.debug());

Я создал песочницу, чтобы продемонстрировать то же самое там, где я использую 'contains' и 'find' в оболочке, чтобы проверить, присутствует ли p с id как "hello", а также на консоли вы можете увидеть выводof wrapper.debug ()

https://codesandbox.io/s/886799791j