编写测试以使用 jest 和 react-testing-library 检查本地 setState 调用

Question

I am currently using react-testing-library and can't seem to work out how to test setState for components.

In the following example, I am trying to test that the number of items loaded is correct based on the data from the API. Will later on expand this to test things like the interactions between of the items.

Component:

...

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>
  )
}

Test:

...

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

})

I understand this has to do with jest mock functions, but don't understand how to make them work with setting states, or with simulating an API.

Sample Implementation (working!)

With more practice and learning about making components testable, I was able to get this working. Here is a full example for reference: https://gist.github.com/alfonsomunozpomer/de992a9710724eb248be3842029801c8

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'))

Answer 1

You should avoid testing setState directly since that is an implementation detail of the component. You are on the right path to testing that the correct number of items are rendered. You can mock the fetch function by either replacing window.fetch with a Jest mock function or using the fetch-mock library to handle the heavy lifting for you.

// Note that this method does not build the full response object like status codes, headers, etc.
window.fetch = jest.fn(() => {
  return Promise.resolve({
    json: () => Promise.resolve(fakeData),
  });
});

OR

import fetchMock from "fetch-mock";
fetchMock.get(url, fakeData);