Below is the code I have for one of the query in Redux Toolkit Query
workflowQuery.ts
const server = setupServer(
http.post(`http://localhost:4040/api/workflowByName`, () => {
return HttpResponse.json({
fileObject: 'PD94bWwgdm',
});
}),
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
export const workflowQuery = createApi({
reducerPath: 'workflowQuery',
baseQuery: await fetchBaseQuery({
baseUrl: 'http://localhost:4040',
prepareHeaders,
})
},
endpoints: (builder) => ({
getworkflowById: builder.mutation({
query: (data) => {
return {
url: api/workflowByName,
method: 'POST',
body: data,
};
},
}),
}),
I am trying to write test cases for above code –
workflowQuery.test.ts
test('useMutation hook sets data to the *emphasized text*resolved response on success', async () => {
const result = { fileObject: 'PD94bWwgdm' };
function User() {
const [getworkFlowById, { data }] =
workflowQuery.endpoints.getworkflowById.useMutation();
return (
<div>
<div data-testid="result">{JSON.stringify(data)}</div>
<button
type="button"
onClick={() =>
getworkFlowById({ path: '/content-hub/workflow/UDJSNkxtZzI=.bpmn' })
}
>
GetWorkflowById
</button>
</div>
);
}
renderComponentWithProviders(<User />);
fireEvent.click(screen.getByText('GetWorkflowById'));
await waitFor(() =>
expect(screen.getByTestId('result').textContent).toBe(JSON.stringify(result)),
);
});
The only problem is while executing the test case and running the query getworkflowById, it is not picking the base query which has the URL – http://localhost:4040.
It means it runs the test case with this URL – api/workflowByName which is not a valid URL and hence test case is getting failed.
Please note that I have setup the server for http://localhost:4040/api/workflowByName so ideally while running the test case it should pick the base query and make the URL as http://localhost:4040/api/workflowByName instead of api/workflowByName.
Anybody has any idea on this. Please share your thoughts.