I'm trying to use Jest to integration test some of our more complex react components which are made up of a number of sub components, the theory being to test high up the stack of components to be closer to how the user experiences the functionality.
I'm using redux for state management and calls are made to sagas as the component is mounted and state updated once the ajax calls are returned via fetch calls in the sagas.
The problem I'm having is when I build my component in Jest I'm only getting the inital state of the component and its like none of the saga's are being called - or at least the results of their fetch calls are not being correctly mocked.
I can see the saga's are being called from debugging statements.
My test is:
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
})
})
From my research I don't seem to be able to find something which tests building a component which inside makes a number of calls - only tests which mock one fetch.
Is what I'm attempting possible?
