0

我正在尝试编写一个测试来检查屏幕是否显示带有错误消息的 Toast。测试通过，但有警告：

 console.error
    Warning: You called act(async () => ...) without await. 
This could lead to unexpected testing behaviour, interleaving multiple act calls 
and mixing their scopes. You should - await act(async () => ...);

屏幕工作正常，我只是在学习如何编写测试。这是我的测试：

it('shows error correctly', async () => {
    mockAxios.get.mockRejectedValueOnce(new Error('Async error'))
    const { queryByText } = renderWithRedux(<DiscoverScreen />)
    await waitFor(() => {
        expect(queryByText(ErrorMessages.GeneralErrorToast)).not.toBeNull()
    })
    
    await waitForElementToBeRemoved(() => queryByText(ErrorMessages.GeneralErrorToast), { timeout: 5000 })
})

我做错了什么？反应原生测试肯定存在问题，因为某些异步查询存在问题，尤其是当您有多个异步查询时。我在这里发现：https ://github.com/callstack/react-native-testing-library/issues/379#issuecomment-720734366

我正在使用本机基础来显示 Toast，我认为它正在使用 Animated。我应该使用 jest.useFakeTimers() 以及如何使用？

4

1 回答 1

0

在研究了本地基础中的 Toast 是如何工作的（这可以在您在 github 中打开源代码时完成 - https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/ToastContainer.js），我发现它使用Animated.timing。

所以我必须找出如何在测试中处理反应原生动画。那篇文章有一个对我有用的解决方案：https ://medium.com/@joncardasis/react-native-how-to-test-components-implementing-animated-with-jest-8cabb5fc2730

在我的 jest 设置文件中添加代码后，这就是我的测试的样子：

global.withAnimatedTimeTravelEnabled(async () => {
    const { queryByText } = renderedComponent

    await waitFor(() => {
        expect(queryByText(ErrorMessages.GeneralErrorToast)).not.toBeNull()
    })

    global.timeTravel(Constants.ErrorToastDelay)
    expect(queryByText(ErrorMessages.GeneralErrorToast)).toBeNull()
})

它可以工作，现在测试通过了，没有任何警告！

我的笑话配置中的一点调整也丢失了。我不得不添加这个：

"testEnvironment": "jsdom"

我希望这也可以帮助其他人！

于 2021-05-23T07:11:45.327 回答