标签: react-native-testing-library

我是单元测试的新手，我正在尝试渲染一个组件以了解有关该库的更多信息。

我正在尝试遵循本指南。

成分

<TouchableOpacity
    style={style}
    onPress={onPress}
    accessibilityRole="button"
>
    <AppText style={textStyle}>{title.toUpperCase()}</AppText>
</TouchableOpacity> 

测试

it("Has the correct title in the button", () => {
    const { getByText } = render(<AppButton title="Hello" />);
  
    expect(getByText("HELLO")).toBeInTheDocument();
});

我只是想查看组件是否正确渲染，但出现错误

received value must be an HTMLElement or an SVGElement.
    Received has type:  object
    Received has value: {"_fiber": {"_debugHookTypes": null, "_debugID": 40, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Function …

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

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

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

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

请问这个怎么测试啊 毕竟，测试图像源真的有意义吗？

这是我的代码：

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

const Background: React.FC<Props> = () => {
  const image = require('../../../../assets/images/image.jpg');
    
  return (
    <View>
      <ImageBackground testID="background" source={image} style={styles.image}></ImageBackground>
    </View>
  );
};

2.) 测试：

import React from 'react';
import {render, container} from 'react-native-testing-library';
import {toHaveStyle} from '@testing-library/jest-native';
import '@testing-library/jest-native/extend-expect';
import Background from '../Background';

describe('Background', () => {   
  test('renders Background image', …

我正在用来ignite创建一个expo react native应用程序。我正在使用本指南https://ignitecookbook.com/docs/recipes/GeneratorComponentTests创建组件测试文件

这是第一个测试文件

\nimport React from "react"\nimport { fireEvent, render, screen } from "@testing-library/react-native"\nimport { HelloWorld } from "../HelloWorld"\n\ndescribe("HelloWorld", () => {\n  it("renders", () => {\n    render(<HelloWorld />)\n    expect(screen.getByText("Hello")).toBeTruthy()\n  })\n})\n

我按照https://reactnativetesting.io/component/setup/进行安装@testing-library/react-native，但现在我得到了

 \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is …

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

    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, …

我正在react-native-testing-library用来测试我的 react-native 组件。我有一个组件（为了这篇文章，它已经被过度简化了）：

export const ComponentUnderTest = () => {

 useEffect(() => {
   __make_api_call_here_then_update_state__
 }, [])

 return (
   <View>
     __content__goes__here
   </View>
 )
} 

这是我的（简化版）component.spec.tsx：

import { render, act } from 'react-native-testing-library';
import { ComponentUnderTest } from './componentundertest.tsx';

test('it updates content on successful call', () => {
   let root;
   act(() => {
      root = render(<ComponentUnderTest />); // this fails with below error message
   });    
   expect(...);
})

现在，当我运行此代码时，出现此错误： Can't access .root on unmounted test renderer

我什至不知道这个错误消息是什么意思。我遵循了react-native-testing-library有关如何使用 …

每当我运行时都会出现错误npm test：

 FAIL  ./App.test.js\n

\xe2\x97\x8f 测试套件运行失败

Jest encountered an unexpected token\n\nThis usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.\n\nBy default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n\nHere's what you can do:\n \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.\n \xe2\x80\xa2 To have some of your "node_modules" files …

简单的测试用例：想要查看给定元素是否获得焦点。

要检查某个元素是否专注于带有 RTL 和 jest 的 React Web 应用程序，您有两个简单的选项可供选择：

1. 您可以检查该元素是否与 document.activeElement 相同（可能必须丢弃一些包装器）
2. 您可以使用https://github.com/testing-library/jest-dom#tohavefocus扩展您的笑话匹配器并使用expect(<element>).toHaveFocus()

我不确定 React Native 的等效检查是什么（相当于 jest-dom 扩展的 RN 是https://github.com/testing-library/jest-native并且明显缺少toHaveFocus匹配器）。

在我正在从事的项目中，我真的很困惑，我找到的所有答案似乎都很简单，但它们对我不起作用。也许我不太明白模拟是什么，我真的需要一些指导。

我正在测试一个父组件，该组件有一个子组件，该子组件使用 GraphQL 从数据库中获取一些数据。在测试父母时，我不关心孩子在做什么。我想用模拟组件（不从数据库获取数据的组件）替换子组件，这样我就可以只关注父组件。

我想出了一个最简单的例子来展示我的情况。请注意，我正在使用 React Native 和 React Native 测试库。

./src/ParentComponent.js

import React from \'react\';\nimport { Text, View } from \'react-native\';\nimport ChildComponent from \'./ChildComponent\';\n\nconst ParentComponent = () => (\n  <View>\n    <Text>Hello World</Text>\n    <ChildComponent />\n  </View>\n);\n\nexport default ParentComponent;\n

./src/ChildComponent.js

import React from \'react\';\nimport { useQuery } from \'react-apollo\';\nimport { View, Text } from \'react-native\';\nimport gql from \'graphql-tag\';\n\nconst CURRENT_USER_QUERY = gql`\n  query {\n    currentUser {\n      username\n    }\n  }\n`;\n\nconst ChildComponent = () => {\n  const { …

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

到目前为止我收到这个错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

之前我遇到了一个Missing class properties transform错误，所以我添加@babel/plugin-proposal-class-properties到了原始引导中已经包含的 Babel 配置expo init，但是一旦我这样做了，我就会得到另一个错误，并且到目前为止我尝试过的任何方法都不起作用。

这是我的 babel 配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      "babel-preset-expo",
      ["@babel/preset-env", { targets: { node: "current" } }],
      "@babel/preset-typescript"
    ],
    plugins: ["@babel/plugin-proposal-class-properties"]
  };
};

和我的 Jest 配置：

"jest": {
   "preset": "react-native"
}

破断测试：

import …

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

./ErrorMessage.js

import React from 'react';
import PropTypes from 'prop-types';
import { Dimensions, Text } from 'react-native';
import Modal, { ModalContent, ScaleAnimation } from 'react-native-modals';
import { theme } from '../styles/theme.styles';

const ModalError = ({ error, onClose }) => {
  if (!error || !error.message) {
    return (
      <Modal visible={false}>
        <Text />
      </Modal>
    );
  }

  return (
    <Modal
      visible
      modalAnimation={
        new ScaleAnimation({
          initialValue: 0,
          useNativeDriver: true,
        })
      }
      onTouchOutside={onClose}
      swipeDirection={['up', 'down', 'left', 'right']}
      swipeThreshold={200} …