Axios 单元测试与 React 测试库和 typescript

Question

I am trying to test an axios API call that happens on onload of a page using react testing library. The mock Axios instance seems not firing even after passing the props into the component. I want to test both error and success scenarios. I have followed many samples but typescript makes my testing harder. Please help

RegistrationConfirm.tsx

export default function RegistrationConfirm(props: any) {
    const [statusMessage, setStatusMessage]  = useState('Confirming your account ...');
    const confirmPostAPI = async (param1: string, param2: string) => {    
        try {
            const res =  await Axios({
                method: 'post',
                url: `${BASE_API_URL}User/registration/confirm?${param1}&${param2}`
            });
            setStatusMessage('Thank you for registering ');
        } catch (err) {
            if(err.response && err.response.data) {
                setStatusMessage(err.response.data.message);    
            } else {
                setStatusMessage('There is a problem with your confirmation email');    
            }
                    
       }
    }
    useEffect(() => {
        if(props.match && props.match.params) {
            const params = props.match.params;
            const strArray = params.userName.split("&");
            console.log("confirmPostAPI", confirmPostAPI)
            confirmPostAPI( strArray[0],  strArray[1]);
        } else {
            setStatusMessage('There is a problem with your confirmation');
        }
    }, [props])
    
    return (
        <div>
            {statusMessage && <Alert data-testid="confirmStatus">{statusMessage}</Alert>}
        </div>
    )
}

Test.ts

import React from 'react';
import axios from 'axios';
import { cleanup, getByTestId, render, screen, waitFor } from '@testing-library/react';
import RegistrationConfirm from '../presentational/registration-confirm/RegistrationConfirm';
import { createMemoryHistory, createLocation } from 'history';
import { match } from 'react-router';
afterEach(cleanup);
const history = createMemoryHistory();
const path = `/route/:userName=user&confirmationCode=23467236742`;
const mockMatch = {
    isExact: false,
    path,
    url: path.replace(':userName', '1'),
    params: { userName: "email=email&confirmationCode=199579" }
};

const location = createLocation(mockMatch.url);

describe("<RegisterConfirm />",()=> {
    let mockPost: jest.SpyInstance;
jest.mock('axios');
beforeEach(() => {
    mockPost = jest.spyOn(axios, 'post')
});

afterEach(() => {
    jest.clearAllMocks();
});
 
    test("should call confirmpostAPI when the props have values", async() => {    
        const req: any = {
            params: {
                id: 5006
            },
            body: {
               
            }
        };
        const res: any = {
            status: () => {
                return {
                    json: jest.fn()
                }
            },
        };
        const result = {
            status: 200,
            data: {
                "message": "Product saved"
            }
        };

                 render (<RegistrationConfirm history={history}
                location={location}
                match={mockMatchNew}/>);
                mockPost.mockImplementation(() => Promise.resolve(result));                
                console.log('mockPost',mockPost);
            await waitFor(() => screen.getByTestId("confirmStatus"));
            expect(mockPost).toHaveBeenCalledTimes(1);
    }); 

});

Error

expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

Answer 1

Try to render the component inside act() . Also call mockImplementation before render function:

mockPost.mockImplementation(() => Promise.resolve(result)); 
act(()=> {
  render (<RegistrationConfirm history={history}
})

If you have many re-render, you will need to use async-await

mockPost.mockImplementation(() => Promise.resolve(result)); 
await act(async ()=> {
   render (<RegistrationConfirm history={history}
})