Odtnhj

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

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