I work on a NextJS project with Pages Router. We are using Jest for unit tests and Playwright for E2E.
The application we are making is a funnel with several steps. Each step is a form with several fields. The final form is the one where the submit button makes a call to the backend.
API calls are located in /src/api/some-file.ts, e.g:
export const callBackend = (
inquiryKey: string,
): Promise<AxiosResponse<void>> =>
backendService.put<void>(`/my/url/${inquiryKey}`);
Those API functions are called from Redux Saga generator functions (in /src/sagas/some-folder/someSaga.ts), like this:
export function* watchCheckoutStep(): Generator<ForkEffect> {
yield takeEvery(completionAT.SAVE_FORM_INPUTS, workCheckoutSaveStep);
...
}
...
function* workCheckoutSaveStep(
action: ReturnType<typeof completionAC.doSaveCheckoutFormInputs>,
) {
yield callCompleteCheckout();
}
export const callCompleteCheckout = (
inquiryKey: string,
): Promise<AxiosResponse<void>> =>
myBackendService.put<void>(`/checkout/complete/${inquiryKey}`);
The service is created using Axios, e.g. in /src/api/myBackendService.ts:
export const myBackendService = axios.create({
baseURL: creditAPIBaseURL,
withCredentials: true,
});
Action creators are in /src/state/my-funnel/myFunnel.actionCreators.ts:
export const doSaveInquiryFormInputs = (data: Partial<MyData>) =>
({
type: SAVE_FORM_INPUTS,
data
}) as const;
The action creators are called from the components where the forms are located, e.g. /src/components/FirstPage/steps/AmountStep.tsx:
const form = useReactiveForm({
initialState: myFormInputs,
validation: myValidators,
callback: (values: mFormInputs) => {
...
dispatch(doSaveInquiryFormInputs(values));
goToStep(AnotherStep); // using next/router
...
},
});
And finally, this component is used in a page at /src/pages/myfunnel/mypage.page.tsx:
function SomePage(): JSX.Element {
...
return (
<PageLayout>
<AmountStep />
</PageLayout>
);
}
The task is to create test(s) which will go through the whole funnel, fill all fields, and then verify that the final backend call is made with the correct payload.
I tried using Playwright, but it turns out that I can't access the requests made from the server side. I was thinking about using Jest tests, but I'm not sure how to simulate filling the whole funnel and navigating between the forms. Any ideas/hints/suggestions?
