Mocking async function jest to test transitive state

Question

I have a component that handles the login part of my app and I would like to test it's loading state.

Basically it does the following:

• press a button to login
• disable the button
• make the request
• enable back the button

What is the best way to mock AuthStore.login in this case to be able to test when isLoading is true and when it get back to false ? I tried mocking with

const loginSpy = jest.spyOn(AuthStore, 'login').mockResolvedValueOnce({ success: true })

but then it returns immediately and I'm not able to test when the button should be disabled.

Here is a sample of the code

const Login = function(){

    const [isLoading, setIsLoading] = useState(false)

    async function onPressGoogleLogin() {
        setIsLoading(true)
        const {
            success,
            error
        } = await AuthStore.login()
        setIsLoading(false)
    }

    return ...
} 

My test using @testing-library/react-native looks like this.

    it.only('testing login', async () => {
        const { getByA11yHint } = render(<LoginScreen componentId="id-1" />)
        const btn = getByA11yHint('login')
        expect(btn).not.toBeDisabled()
        await act(async () => {
            await fireEvent.press(btn)
        })
        expect(btn).toBeDisabled()
        expect(within(btn).getByTestId('loader')).toBeTruthy()
    })

Any ideas ?

Answer 1

Test 1

Mock AuthStore.login() to not return a resolving promise. Mock it to return a pending promise. Inquire about the state of things when the button is pressed.

Test 2

Then, in a separate test, mock AuthStore.login() to return a resolving promise. Inquire about the state of things when the button is pressed.

Test 3

Bonus points: in a separate test, mock AuthStore.login() to return a rejecting promise. Inquire about the state of things when the button is pressed.