web-dev-qa-db-fra.com

Définir l'état lors du test du composant fonctionnel avec le crochet useState ()

Lorsque j'ai testé un composant de classe avec une enzyme, je pouvais faire wrapper.setState({}) pour définir l'état. Comment puis-je faire de même maintenant, lorsque je teste un composant de fonction avec le crochet useState()?

Par exemple dans mon composant j'ai:

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

Et je veux changer mode dans mon test

reactjsenzymesetstatereact-hooks
17
Anna

Lorsque vous utilisez l'état à partir de hooks, votre test doit ignorer les détails d'implémentation tels que l'état afin de le tester correctement. Vous pouvez toujours vous assurer que le composant passe l'état correct à ses enfants.

Vous pouvez trouver un excellent exemple dans ce article de blog écrit par Kent C. Dodds.

En voici un extrait avec un exemple de code.

Test qui repose sur les détails d'implémentation de l'état -

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 qui ne repose pas sur les détails d'implémentation de l'état -

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')
})
15
Moti Azu