Я пытаюсь использовать Jest для интеграционного тестирования некоторых из наших более сложных реактивных компонентов, которые состоят из нескольких подкомпонентов, теория состоит в том, чтобы тестировать стек компонентов, чтобы быть ближе к тому, как пользователь воспринимаетфункциональность.
Я использую избыточность для управления состоянием, и вызовы выполняются в sagas, когда компонент монтируется и состояние обновляется, как только вызовы ajax возвращаются через вызовы выборки в sagas.
Проблема, с которой я сталкиваюсь, заключается в том, что когда я создаю свой компонент в Jest, я получаю только начальное состояние компонента, и, как ни одна из саг, не вызывается - или, по крайней мере, результаты их вызовов извлечения не корректно высмеиваются. .
Я вижу, что саги вызываются из операторов отладки.
Мой тест:
import React from 'react';
import {fireEvent, cleanup, waitForDomChange, wait} from '@testing-library/react'
import {renderWithRedux} from '../../../../helpers/testSetup'
import "@testing-library/jest-dom/extend-expect"
import {ComponentContainer} from '../componentContainer'
import {
ajaxCall1,
ajaxCall2,
ajaxCall3
} from '../../../../__mocks__/componentMockData'
// test setup
afterEach(cleanup)
beforeEach(() => {
fetch.resetMocks();
});
// consts
const match = {
params: {
id: "23423"
}
}
// tests
describe('Component Container', () => {
it('Rendering component', async () => {
// 1. Arrange
fetch
.once(ajaxCall1())
.once(ajaxCall2())
.once(ajaxCall3())
// building my component here
const {getAllByText,getByTestId,findByTestId,store} = renderWithRedux(<ComponentContainer match={match} />)
expect(getAllByText("Loading component")[0]).toBeVisible()
await findByTestId('componentHeaderCard') // this times out
// 2. Act
// 3. Assert
})
})
Из моих исследований я не могунайти что-то, что проверяет создание компонента, который внутри делает несколько вызовов - только тесты, которые проверяют одну выборку.
Это то, что я 'я пытаюсь?