模拟redux thunk调用

Question

我只是想在我的训练者中做一个模拟的反应，但是我找不到我做错了的地方。我在redux控制器中添加了一些注释以获得一个清晰的视图。有人能帮我得到我想要的吗？

组件

const handleRequest = () => {
        setProductSaving(true)

        const callback = (response) => {
            if (response.status === 200) {
                setProductSaving(false)
                setProductRequested(true)
            }
        }

        const productInfo = {
            // product input
        }

        dispatch(requestProduct(productInfo))
    }

雷击控制器

export const requestProduct = ({ smeId, userId, requestPayload, callback, approveeUserId, isApprovee = false}) => {
    return async (dispatch) => {
        
        try {
            let endpointUrl = `/product/${smeId}/user/${userId}`;

            if (isApprovee) {
                endpointUrl = `/product/${smeId}/approver/${userId}?approveeUserId=${approveeUserId}`;
            }

            const response = await axios.put(endpointUrl, requestPayload);
            // NOTE: should mock above response when calling
            // CURRENT => response is 'undefined' here. so below code doesn't run on test environment
            // REQUIRED => to run below code with the mock response

            if(response.status === 200) {
                dispatch({
                    type: NOTIFY_STATUS,
                    payload: {
                        message: response.data.message,
                        variant: 'success',
                    },
                })
            }

            callback?.(response)
            
        } catch (error) {
            dispatch({
                type: NOTIFY_STATUS,
                payload: {
                    message: error.message,
                    variant: 'error',
                },
            })
        }
    }
}

测试文件

jest.mock('axios');

test('should be able to request product', () => {
        const { getByTestId } = render( <Router>
            <Provider store={store}>
                <ThemeProvider theme={techpathTheme}>
                    <ProductCard product={product} />
                </ThemeProvider>
            </Provider>
        </Router>)

        fireEvent.click(getByTestId('requestbtn')) // this will trigger the action in component 

        const mockedResponse = {
            data: { message: "SMEProductTagAddedSuccessfully"},
            status: 200,
            statusText: 'OK',
        };

        axios.put.mockResolvedValueOnce(mockedResponse);
    })

Answer 1

在触发事件之前，您应该模拟axios.put。否则，它将调用原始的axios行为。

jest.mock('axios');

test('should be able to request product', () => {
        const mockedResponse = {
            data: { message: "SMEProductTagAddedSuccessfully"},
            status: 200,
            statusText: 'OK',
        };

        axios.put.mockResolvedValueOnce(mockedResponse);

        const { getByTestId } = render( <Router>
            <Provider store={store}>
                <ThemeProvider theme={techpathTheme}>
                    <ProductCard product={product} />
                </ThemeProvider>
            </Provider>
        </Router>)

        fireEvent.click(getByTestId('requestbtn')) // this will trigger the action in component 
    })