javascript - jest と react-testing-library を使用して、ローカルの setState 呼び出しをチェックするテストを作成します。

Question

現在、react-testing-library を使用していますが、コンポーネントの setState をテストする方法がわかりません。

次の例では、読み込まれたアイテムの数が API からのデータに基づいて正しいことをテストしようとしています。後でこれを拡張して、アイテム間の相互作用などをテストします。

成分：

...

componentDidMount() {
    this.getModules();
}

getModules () {
    fetch('http://localhost:4000/api/query')
    .then(res => res.json())
    .then(res => this.setState({data : res.data}))
    .catch(err => console.error(err))
}

...

render() {
  return(
      <div data-testid="list">
          this.state.data.map((item) => {
              return <Item key={item.id} data={item}/>
          })
      </div>
  )
}

テスト：

...

function renderWithRouter(
    ui,
    {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {},) {
    return {
        ...render(<Router history={history}>{ui}</Router>),
        history,
    }
}

...

test('<ListModule> check list items', () => {
     const data = [ ... ]
     //not sure what to do here, or after this
     const { getByTestId } = renderWithRouter(<ListModule />)

     ...

     //test the items loaded
     expect(getByTestId('list').children.length).toBe(data.length)

     //then will continue testing functionality

})

これは jest モック関数と関係があることは理解していますが、状態の設定や API のシミュレーションで機能させる方法がわかりません。

サンプル実装 (動作中!)

コンポーネントをテスト可能にするための練習と学習により、これを機能させることができました。参照用の完全な例は次のとおりです。

const data = [...]

fetchMock.restore().getOnce('http://localhost:4000/api/query', JSON.stringify(data));

const { getByText } = renderWithRouter(<ListModule />)

const listItem = await waitForElement(() => getByText('Sample Test Data Title'))