Storybook react-query msw mock PUT

90 Views Asked by At

I am using Storybook MSW Addon. Get calls are working as expected. I am trying to mock a PUT for my component in the story, but the mutation status and the onSuccess properties are not changing for me to alter the UI based on that response.

Here is my mock call:

http.put('myUrl, async ({request}) => {
        await delay('real')
        return await HttpResponse.json({myJson})
    })

Not only that, this put request has a body I am passing and it does not allow me to grab that body to dynamically return the necessary response.

My mutation looks like this:

useMutation({
        mutationFn: (isEnabled: boolean) => {
            //the new instanciates an API factory with all my api's
            return Api(isEnabled)
        }
    })

Api Function:

mfaEnablement = async (isEnabled: boolean): Promise<MyResponse> => {
        const {userId, tenantId} = getSystemRequestDetails();
    
        const body = {
            isEnabled,
        };
        
        const response = await this.service.axiosApi(tenantId, userId, body)
    
        return response.data
    }

I keep getting this status which never changes after I make the request:

MUTATION STATUS idle

Use inside my component:

mutation.mutate(false, {
            onSuccess: () => {
                console.log('success')
            },
            onError: () => {
                console.log('error')
            }
        });

I have verified that it DOES call the mutationFN and chains into the api fine. I have validated that the mock successfully intercepts. The problem I am having is that react-query status's aren't changing like they do for GET calls. So using values like isLoading to test dynamic loading of components is not working.

I am essentially making an NPM package of common api driven features that are used across multiple applications. So I don't want to make these UI screen's multiple times and repeat the code. These applications are not part of a single repo or mono repo so an NPM package with a testable storybook is necessary.

0

There are 0 best solutions below