Установить состояние при тестировании функционального компонента с помощью ловушки useState () - PullRequest
Новая
       16

Установить состояние при тестировании функционального компонента с помощью ловушки useState ()

3 голосов
/ 25 марта 2019

Когда я тестировал компонент класса с ферментом, я мог сделать wrapper.setState({}), чтобы установить состояние. Как я могу сделать то же самое сейчас, когда я тестирую функциональный компонент с useState() hook?

Например, в моем компоненте у меня есть: 

const [mode, setMode] = useState("my value");

И я хочу изменить mode в моем тесте

1 Ответ

3 голосов
/ 25 марта 2019

При использовании состояния из ловушек ваш тест должен игнорировать детали реализации, такие как состояние, чтобы правильно его проверить. Вы все еще можете убедиться, что компонент передает правильное состояние своим дочерним элементам.

Вы можете найти отличный пример в этом сообщении в блоге , написанном Кентом К. Доддсом.

Вот эксперт по коду с примером кода.

Тест, основанный на деталях реализации состояния - 

test('setOpenIndex sets the open index state properly', () => {
  const wrapper = mount(<Accordion items={[]} />)
  expect(wrapper.state('openIndex')).toBe(0)
  wrapper.instance().setOpenIndex(1)
  expect(wrapper.state('openIndex')).toBe(1)
})

Тест, не основанный на деталях реализации состояния - 

test('counter increments the count', () => {
  const {container} = render(<Counter />)
  const button = container.firstChild
  expect(button.textContent).toBe('0')
  fireEvent.click(button)
  expect(button.textContent).toBe('1')
})
...