React Native 测试 - 无需等待即可执行

2023-12-19

下面的测试通过了,但我收到以下警告两次,我不知道为什么。有人可以帮我弄清楚吗?

    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 () => ...);
      at printWarning (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:120:30)
      at error (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:92:5)
      at ../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14953:13
      at tryCallOne (../../node_modules/react-native/node_modules/promise/lib/core.js:37:12)
      at ../../node_modules/react-native/node_modules/promise/lib/core.js:123:15
      at flush (../../node_modules/asap/raw.js:50:29)
import { fireEvent } from '@testing-library/react-native'
import { renderScreen } from 'test/render'

describe('screens/home', () => {
  it('should render and redirect to the EventScreen', async () => {
    const {
      getByA11yLabel,
      findByA11yLabel,
      findAllByA11yLabel,
      toJSON
    } = renderScreen('Main')
    expect(toJSON()).toMatchSnapshot('Default render')

    const title = 'New event'
    const titleInput = getByA11yLabel('event.title')

    // Change title - sync fn
    fireEvent.changeText(titleInput, title)

    // Create button should be visible
    const createButton = await findByA11yLabel('event.create')
    expect(titleInput.props.value).toBe(title)
    expect(createButton).toBeTruthy()
    expect(toJSON()).toMatchSnapshot('Change title')

    // Create event - async fn
    fireEvent.press(createButton)

    // The app should be redirected to the EventScreen
    const titleInputs = await findAllByA11yLabel('event.title')
    const upsertButton = await findByA11yLabel('event.upsert')
    expect(toJSON()).toMatchSnapshot('Create event')
    expect(titleInputs).toHaveLength(2)
    expect(titleInputs[0].props.value).toBe('') // @MainScreen
    expect(titleInputs[1].props.value).toBe(title) // @EventScreen
    expect(upsertButton).toBeTruthy()
  })
})
  • 据我所知,不需要包装fireEventact- link https://callstack.github.io/react-native-testing-library/docs/api/#act
  • findBy*也自动包裹着act - link https://callstack.github.io/react-native-testing-library/docs/api-queries#findby
  • Related GitHub 中的问题 https://github.com/callstack/react-native-testing-library/issues/379仍然开放

依赖项:

  • 反应:16.13.1
  • 世博会:39.0.4
  • 笑话:26.6.3
  • ts-笑话:26.4.4
  • 玩笑博览会:39.0.0
  • @testing-library/jest-native:3.4.3
  • @测试库/反应:11.2.2
  • @testing-library/react-native:7.1.0
  • 反应测试渲染器:16.13.1
  • 打字稿:4.1.2

如果您已用尽所有其他调试工作并且非常确定您的代码编写正确,那么它可能与react-native/jest-preset替换global.Promise带有模拟(参见issue https://github.com/facebook/react-native/issues/29303).

在这种情况下,问题的解决方案是覆盖/修补 jest 预设,以首先保存原始的全局 Promise,应用react-native/jest-preset然后恢复原来的Promise(覆盖模拟版本)。这让我可以使用await在与渲染无关的测试中,不会触发可怕的

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 () => ...);

此代码片段显示了执行此补丁的一种方法:https://github.com/sbalay/without_await/commit/64a76486f31bdc41f5c240d28263285683755938 https://github.com/sbalay/without_await/commit/64a76486f31bdc41f5c240d28263285683755938

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native 测试 - 无需等待即可执行 的相关文章

  • 应用程序位于前台时的 IOS Expo 推送通知

    从博览会文档中阅读 对于 iOS 明智的做法是处理以下推送通知 当应用程序处于前台时收到 因为否则用户 永远不会见到他们 应用程序运行时到达的通知 iOS 上的前台不会显示在系统通知列表中 A 常见的解决方案是手动显示通知 为了 例如 如果
  • React Native:加载图像后应用程序性能不佳

    加载图像似乎没有问题 但是加载完毕后就出现问题了 在我的应用程序中 我在整个游戏中一张一张地加载卡片图像 一旦我加载了 40 张卡片图像 整个应用程序就会变得很慢 它总是发生在第 40 个图像处 当我在第 40 个图像之后继续加载更多卡片图
  • React Native初学者index.android.js没有显示

    没有代码 我正在创建一个项目 但缺少一些文件 使用命令react native init helloworld项目已创建 但是index android js and index ios js没有生成或丢失 只是index js正在出现 这
  • 如何为 HOC 创建共享状态?

    我创造了LoadBookHOC包裹着BookDetails and BookSummary成分 LoadBookHOC js const LoadBookHOC InnerComponent gt class LoadBook extend
  • React Native Expo StackNavigator 重叠通知栏

    我正在尝试为我的 React Native Expo 应用程序实现导航栏 这里有一个问题 dependencies expo 18 0 3 react 16 0 0 alpha 12 react native 0 45 1 react na
  • 我应该使用 redux-form 存储而不是组件状态和 Redux 自定义存储吗?

    我相信任何应用程序都应该有一个事实来源 我的应用程序将有 90 多种交易表格和 150 份报告 复杂的数据结构 父级 子级 计算 所以在 React 中我发现了三个令人困惑的存储状态的地方 组件状态 当我们don t想要共享数据 Redux
  • react-native-firebase 无法处理通知 click_action 导航到通知屏幕

    我正在使用这个react native firebase和react navigation进行导航 我可以成功地从服务器或控制台推送通知 无论它是在前台还是后台 但我发誓文档不太清楚如何打开通知并导航到通知它所属的屏幕 这些是我的 onMe
  • 从父组件触发子组件内部的函数

    如何从父组件触发子组件内部的函数 以与抽屉导航相同的风格进行操作 他们这样做 this props navigation toggleDrawer 来自父母 我怎样才能做同样的事情 如果我正确理解你的问题 我认为你有点混淆了 您显示的示例是
  • 如何从javascript数组中获取唯一用户名的最后记录

    我有一个对象数组 例如 id 8 username peter weight 80 date 2019 10 14 id 1 username harry weight 80 date 2019 01 01 id 2 username ha
  • 如何将变量传递给函数引用?

    在 React Native 中 当你有需要在渲染时运行并且必须传递变量的函数时 大多数人建议应该使用 onPress gt this functionName variable 然而 当处理大型列表和复杂组件时 您必须优化代码 为每个 r
  • 如何在 Android 中实现 React Native UI 组件方法

    我很清楚 对于react native本机模块 我们可以使用 ReactMethod导出一个方法并从 JSX 调用它 但是我们如何在 React Native 原生 UI 组件中做同样的事情呢 在文档中我只看到 ReactProp被提及 如
  • 如何向 React 中的 onChange 函数传递附加参数

    所以 我遇到了这个问题 我这里有这种类型的元素 显然在更改输入时有事件 是否可以像这样传递参数并访问事件 如果是这样 我该怎么办 this function accepts two other params index stringValu
  • React Native:约束 Animated.Value

    我正在制作一个 React Native 应用程序 场景是这样的 我希望用户能够平移视图 但不完全按照他想要的方式 我想约束视图被拖动时可以移动的距离由用户 我已经阅读了两者的文档PanResponder and AnimatedAPI 多
  • React Native + Redux 基本身份验证

    我正在寻找一种为我的反应本机应用程序创建基本身份验证的方法 我找不到任何反应本机应用程序的好例子 要登录 应用程序将电子邮件 密码 clientSecret 发送到我的服务器 如果OK 服务器返回accessToken refreshTok
  • jest快照测试:如何忽略jest测试结果中的部分快照文件

    问题 忽略 snap 文件测试结果的某些部分 这里的问题是 我的测试中有一些组件具有随机值 我并不真正关心测试它们 有什么办法可以忽略我的 X snap 文件的一部分吗 因此 当我将来运行测试时 它不会给我测试失败的结果 现在您还可以使用属
  • 用笑话测试实现react-leaflet映射的react组件的问题

    当我尝试测试实现react leaflet库的react组件时 遇到以下问题 C digital booking ui node modules react leaflet lib index js 1 Object
  • 如何在react-navigation v5中使用withNavigation?

    我有一个嵌套组件 我想使用withNavigation在react navigation v5的嵌套组件中 为什么你不创建自己的带导航 import React from react import useNavigation from re
  • 如何在 React Native 中使用相同的 Firebase 数据库在两个应用程序之间进行通信?

    我有两个不同的应用程序使用相同的实时数据库 在第一个应用程序中 我发送的订单包含一些要保存在数据库中的数据字段 在另一个应用程序中 我只添加一个侦听器 firebase database ref userOrder currentUser
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on

随机推荐