В настоящее время я использую реагирующую библиотеку и не могу понять, как проверить 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
})
Я понимаю, что это связано с шутливыми макетными функциями, но не понимаю, как заставить их работать с настройкой состояний или с имитацией API.
Пример реализации (работает!)
С большей практикой и изучением того, как сделать компоненты тестируемыми, я смог заставить это работать. Вот полный пример для справки: 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'))