问题标签 [react-native-testing-library]

我正在尝试设置一个 React Native/TypeScript 应用程序以使用 Jest 和进行测试@testing-library/react-native；

到目前为止，我收到此错误：

以前我遇到了一个Missing class properties transform错误，所以我添加@babel/plugin-proposal-class-properties到已经包含在原始引导程序中的 Babel 配置中expo init，但是一旦我这样做了，我就会得到另一个错误，到目前为止我没有尝试过任何工作。

这是我的 babel 配置：

和我的 Jest 配置：

断裂试验：

请注意，我花了一些时间尝试不同的预设/插件/配置组合，因此这可能不是理想的设置。我试图了解我选择的这个特定堆栈是否存在实际限制（到目前为止，我找不到使用这个确切堆栈的精确最新示例）、错误配置或我的实际错误应该提高。我也不知道该错误（如果有的话）实际上属于哪个包，我应该将它报告给 Jest 吗？还是反应原生？还是通天塔？还是测试库？

任何帮助将不胜感激。

谢谢！

在我的新 React Native 应用程序中，我想添加一些 Jest 测试。

一个组件呈现背景图像，该图像直接位于assets文件夹中的项目中。

现在我偶然发现了如何测试该图像是否实际上是从该路径获取的，因此存在于组件中并正确渲染。

我尝试将toHaveStylefrom@testing-library/jest-native与容器一起使用，它返回的错误toHaveStyle不是函数。然后我尝试了同样的queryByTestId错误，同样的错误。当我这样做时 expect(getByTestId('background').toBeInTheDocument);，我觉得这没用，因为它只检查是否存在具有此 testId 的元素，而不是图像源。

请问，我该如何测试这个？毕竟测试图像源真的有意义吗？

这是我的代码：

1.) 应测试的组件 ( Background)：

2.) 测试：

我对使用 react-testing-library 非常陌生，特别是 native-testing-library。我似乎在查询元素时遇到了麻烦。

在下面的示例中，我希望测试通过，但似乎找不到元素。

我有一种感觉，我在某处做错了什么，但我找不到太多关于它的信息。任何帮助都将不胜感激[：

编辑** 如果我使用 TestID 似乎工作正常，但我不应该仍然能够通过文本评论查询它吗？除非绝对必要，否则我不喜欢使用测试 ID，因为它不是面向用户的。

这是我要测试的组件

这是测试文件

最后是 repo 对象，我仔细检查了它，它需要的所有东西都应该在里面。

我还为此创建了一个代码沙箱，尽管我认为它实际上不能运行测试，因为它使用了 react-native-web。

https://codesandbox.io/s/gallant-tereshkova-3biqj

我很难理解如何测试我的模态组件。我将react-native-modals包和@testing-library/react-native与 Jest 一起使用。我的组件是一个 GraphQL 错误传递给它时弹出的模式。

./ErrorMessage.js

到目前为止，我的测试非常简单。我只是想确保它正在呈现模态。我不确定这里需要模拟什么或如何去做。

./__tests__/ErrorMessage.test.js

我得到的错误是......

快照只是打印...

./__tests__/__snapshots__/ErrorMessage.test.js.snap

我怎样才能克服这个错误并制作正确的快照？

我试图阅读 at testing-library/react-native的文档，并在 stackoverflow 上进行了搜索，但没有找到好的结果。

我有这个组件

我需要测试第一个padding收到数字的道具。我也试过 getByText 但是，obv，它不起作用。

我尝试过了

我问自己是否存在某种 getByNumber 或类似的东西。

问题是：

我怎样才能正确测试const { queryBy } = render(<ClickableCard padding={10} />);

我围绕 ScrollView 编写了一个简单的包装组件，它根据给定的可用高度启用/禁用滚动：

我需要为此组件编写单元测试。到目前为止，我有：

我还想确认，如果可用高度大于表单高度，则在布局上，scrollEnabled 正确设置为 false。我试过这样的事情：

我正在尝试使用 Jest 和 Typescript 测试我的 LoginScreen。我使用 redux 和 redux-persist 进行存储，并将存储设置为使用 AsyncStorage 作为配置的一部分。我怀疑 redux-persist 在它使用的内置超时功能用完并尝试将存储设置为默认存储后尝试补水？我收到以下错误：

目前我的测试如下所示：

我的 MockNavigator 看起来像这样：

这是我创建存储的方式：

我想测试我的 React Native 代码，但我在纠结应该使用哪个测试库。

根据我在互联网上阅读的内容，与组件的内部逻辑相比，专注于测试用户行为是一种更好的做法。这就是为什么我将jest库与test-renderer一起使用。

ReactNative 官方文档上有两个推荐的库，和我相当：react-native-testing-library和@testing-library/react-native（也称为native-testing-library）。

他们之间有什么区别？

我有一个这样的代码：

和一个看起来像这样的测试。

当我运行测试时，我收到一条错误消息

做了一些搜索，我得到的大部分答案都说这与我返回组件的方式有关。似乎它不允许有条件返回，因为我已经尝试过：

和

并得到同样的错误。有没有办法处理这种情况？

更新：<App />由于某种原因，我的反应导航中的某处导致了这个问题，因为<WrapWithProvider><View /></WrapWithProvider>工作得很好，测试通过了。

如果我运行yarn test，运行jest，我得到以下错误：

但这只有在我遵循以下指示时才会发生react-native-testing-library：

然后使用 jest.config.js 文件中的 setupFilesAfterEnv 选项自动将其添加到您的 jest 测试中：

如果我删除该文件，我将不会收到该错误，并且可以运行简单的测试。当我删除文件时，测试会运行但AsyncStorage无法识别，因此测试仍然无法运行。我有AsyncStorage。它已安装并且应用程序可以运行，但我想添加组件测试。我还注意到jest.config.js测试项目本身明显缺少文件 . 是否有任何文档或工作示例？我宁愿不做我的项目和测试项目的差异。是否有更详细或可靠的测试框架/模块可用？