反応テストライブラリのsetStateの方法

Question

概要：

• Enzymeを使用してテストする前にスクリプトテストをリファクタリングしましたが、今は@ testing-library/reactを使用したいと思います

問題：

• @ testing-library/reactでsetStateの解決策が見つかりません

Answer 1

setStateの使用は、使用するテストライブラリに関係なく危険なアプローチです。

1. それは実装の詳細（たとえば、状態内のプロパティ名）に依存するため、テストを維持するのがはるかに困難になります。変更するテストが増え、アプリが正常な場合にテストが壊れやすくなります。
2. クラスコンポーネントをフック付きの機能コンポーネントに変換すると、それを呼び出すことはできません。したがって、実装の詳細にさらに依存します。
3. そして最後に、直接的な状態操作は、現実の世界では決して得られない状態で終わる可能性があります。これは、ある状態に到達することが不可能であるためコンポーネントが壊れることを意味しますが、直接初期化を伴うテストは問題ありません。

それであなたは何をしますか？小道具を提供し、小道具を変更し、props（wrapper.find('button').filter(button => button.text() === 'Cancel').props().onClick()は酵素、fireEvent.click(getByText(/Cancel/i))はRTL）を呼び出し、何がレンダリングされているかを確認します。

このようにして、テスト対象のコンポーネントを更新した後、テストはより短く、最も実際的で、必要な変更が少なくなります。