对“任何”值的不安全成员访问 [0]

Question

I'm trying to assert the parameters my payment confirmation submission function is called with, but getting a type error on confirmPaymentMock.mock.calls[0][0] :

const confirmPaymentMock = jest.fn();

it('should call onSubmit on button click', () => {
    const { getByTestId } = renderComponent('orderId');

    fireEvent.click(getByTestId('submitPay'));
    //Unsafe member access [0] on an `any` value.
    expect(JSON.stringify(confirmPaymentMock.mock.calls[0][0])).toEqual(JSON.stringify({
        elements: mockStripe().elements(),
        confirmParams: {
            return_url: `${window.location.origin}/${appRoutes.successfulOrder}`
        }
    }));
});

Answer 1

Type safety works via static code analysis and confirmPaymentMock.mock.calls[0][0] will only be valid if confirmPaymentMock is called at least once, which is not something that can always be determined without running the code. So what options are there for dealing with this?

You can ignore the error. You can use a safer access method. Or you can add extra checks before this line to ensure you only access a safe field.

Ignoring the error is quite straightforward, you add a directive for ESLint to ignore that specific error on that line.

A safer access method would be something like lodash get , which will return a default value if the path is invalid.

An extra check would involve using an additional expect statement to make sure confirmPaymentMock.mock.calls[0] is not null.

The last approach here is, in my opinion, the safest one to take. Your unit test should not just pass with the current state of the code, it should either remain passing or give a meaningful error if the code is changed. That means if the code being tested is refactored so that your mock is not called any more, you'd prefer the test to fail with an error along the lines of Expected confirmPaymentMock.mock.calls[0] to not be null to an error like TypeError: Cannot read property of undefined , which is much less readable.

You can also get a useful error message along these lines if you use _.get(confirmPaymentMock, 'mock.calls[0][0]', 'Payment mock was not called') as then the expect statement making the comparison will tell you that there is a mismatch, and it expected some real value but got 'Payment mock was not called'.