web-dev-qa-db-ja.com

useState（）フックで機能コンポーネントをテストするときに状態を設定する

酵素でクラスコンポーネントをテストすると、wrapper.setState({})を実行して状態を設定できます。 useState()フックを使用して関数コンポーネントをテストしているときに、どうすれば同じことができますか？

たとえば、私のコンポーネントでは：

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

そして、テスト内でmodeを変更したい

reactjsenzymesetstatereact-hooks
17
Anna

フックから状態を使用する場合、適切にテストするには、状態などの実装の詳細をテストで無視する必要があります。それでも、コンポーネントが正しい状態をその子に渡すことを確認できます。

この素晴らしい例は、Kent C. Doddsによって作成された ブログ投稿 にあります。

以下は、コード例を示した抜粋です。

状態の実装の詳細に依存するテスト-

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