Жестко запрограммированная ожидаемая строка и извлеченная переменная в неглубоком тесте React

Question

Я сделал две версии одного и того же простого теста и ищу лучший.Разница лишь в том, что первый возвращает HTML-код <div>::name::</div>, а второй - JSX <div>{name}</div>.Я полагаю, что цель этого вида теста рендера состоит в том, чтобы доказать, что правильный код HTML возвращается из рендера, поэтому я считаю, что первый подход более точен.Мысли?

версия 1:

const prop = {name: '::name::'}
const wrapper = shallow(<Component prop={prop} />)

expect(wrapper.equals(
  <div>
    <div>::name::</div>
  </div>
)).toEqual(true)

версия 2:

const name = ::name::
const wrapper = shallow(<Component prop={name: name} />)

expect(wrapper.equals(
  <div>
    <div>{name}</div>
  </div>
)).toEqual(true)

Answer 1

Большой разницы нет, поскольку

1. ::name:: все еще жестко задан

2. .equals() не проверяет, является ли это ссылкой ната же самая переменная.

Таким образом, до сих пор нет способа проверить, если name исходит от реквизита и не жестко задан в равной степени для значения тестирования.

Это лучшепросто обновите реквизиты в своем тесте и убедитесь, что компонент изменен:

wrapper.setProps({prop: {name: 'anotherName'}});
expect(wrapper).toMatchSnapshot();

Кстати, вам лучше полагаться на toMatchSnapshot() вместо сравнения вручную.

Answer 2

Первое правило большого пальца в модульном тестировании React - проверять только условные выражения .

Что это означает, когда вы пропускаете реквизит и просто переводите реквизит в div, это будетоказаны.Вы не должны проверять, отображается ли то же самое значение, которое вы передаете, в div, потому что это поведение библиотеки, а React уже протестирован для правильного отображения значений реквизита.

Вместо этого вашТестовые случаи должны быть сосредоточены на условных выражениях и вашей логике.Например,

const Example = ({ isFoo }) => {
  return(
    <div>{isFoo ? <Foo /> : <Bar />}</div>
  );
};

Теперь это должно быть проверено модулем как

const wrapper = shallow(<Example isFoo={true} />);

expect(wrapper.contains('Foo')).toEqual(true);
expect(wrapper.contains('Bar')).toEqual(false);

Примечание: синтаксис может отличаться, но вы понимаете суть.