模拟异步函数开玩笑以测试传递状态

Question

我有一个组件来处理我的应用程序的登录部分，我想测试它的加载状态。

基本上它做了以下事情：

• 按一个按钮登录
• 禁用按钮
• 提出请求
• 启用返回按钮

在这种情况下，模拟 AuthStore.login 以便能够测试 isLoading 何时为 true 以及何时返回 false 的最佳方法是什么？ 我试着用

模拟

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

但它会立即返回，我无法测试何时禁用该按钮。

这是代码示例

const Login = function(){

    const [isLoading, setIsLoading] = useState(false)

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

    return ...
} 

我使用@testing-library/react-native 的测试如下所示。

    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()
    })

有什么想法吗？

Answer 1

测试 1

模拟AuthStore.login() 不返回解决承诺。模拟它以返回待处理的承诺。查询按下按钮时事物的状态。

测试 2

然后，在单独的测试中，模拟 AuthStore.login() 以返回解决承诺。查询按下按钮时事物的状态。

测试 3

奖励积分：在单独的测试中，模拟 AuthStore.login() 以返回 rejecting 承诺。查询按下按钮时事物的状态。