为什么玩笑测试无法识别反应原生组件？答案

【问题标题】：Why is jest test not recognizing react native components?为什么玩笑测试无法识别反应原生组件？
【发布时间】：2022-02-06 16:12:59
【问题描述】：

我有一个反应本机应用程序，我正在尝试运行测试，我已经设置了一个基本的问候组件，如下所示，称为 Greetings.js：

import React from 'react';
import {View, Text} from 'react-native';

const Greetings = ({hello}) => {
  return (
    <View>
      <Text>{hello}</Text>
    </View>
  );
};

export default Greetings;

这是我正在运行的名为 Greetings.test.js 的测试：

import React from 'react';
import {render, screen} from '@testing-library/react-native';
import Greetings from './Greetings';

describe('Greetings component', () => {
  it('renders hello world as a test', () => {
    render(<Greetings hello="Hello World!" />);

    const helloWorldElement = screen.getByText('Hello World!');
    expect(helloWorldElement).toBeInTheDocument();
  });
});

由于某种原因它无法识别 react native 组件，这是运行测试时的错误：

 FAIL  app/__tests__/components/Account/Greetings.test.js
  ● Console

    console.error
      Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You li
forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
      
      Check the render method of `Greetings`.
          at Greetings (C:\Users\meeve\OneDrive\Desktop\Cozify\smartliving-app\app\__tests__\components\Account\Greetings.js:4:21)

       5 |   return (
       6 |     <View>
    >  7 |       <Text>{hello}</Text>
         |       ^
       8 |     </View>
       9 |   );
      10 | };

      at printWarning (node_modules/react/cjs/react.development.js:220:30)
      at error (node_modules/react/cjs/react.development.js:196:5)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2215:7)
      at Greetings (app/__tests__/components/Account/Greetings.js:7:7)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6016:18)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8744:13)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9966:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)

它对视图组件显示相同的错误。它不应该在初始设置后自动识别这些组件吗？我已经安装了以下内容： yarn add install -dev react-test-renderer@17.0.1 @testing-library/react-native @testing-library/jest-native

package.json 文件中的当前 Jest 配置：

  "jest": {
    "preset": "react-native",
    "coverageThreshold": {
      "app/**/selectors.{js,ts,tsx}": {
        "_comment": "Let's strive to increase coverage, instead of lowering it!",
        "lines": 57
      }
    },
    "coverageDirectory": ".coverage/",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "native"
    ],
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
    "testPathIgnorePatterns": [
      "\\.snap$",
      "<rootDir>/node_modules/"
    ],
    "cacheDirectory": ".jest/cache",
    "setupFiles": [
      "./jest.setup.js"
    ]
  }

【问题讨论】：

标签： reactjs react-native jestjs

【解决方案1】：

组件渲染似乎没有问题，但测试。

您可以使用getByText查询，可以从render获取。

更多信息请参考React Native Testing Library。

import React from 'react';
import {render} from '@testing-library/react-native';
import Greetings from './Greetings';

describe('Greetings component', () => {
  it('renders hello world as a test', () => {

   const {getByText} = render(<Greetings hello="Hello World!" />);

   expect(getByText('Hello World!')).toBeDefined();
 
  });
});

【讨论】：

非常感谢您的回答坦克，我已经尝试使用从渲染获得的 getByText 查询，但它仍然给出相同的错误。你认为这可能与 package.json 文件中的 jest 配置有关吗？
我将当前的 Jest 配置添加到原始问题中

【解决方案2】：

应用程序是在不久前建立的，似乎他们已经模拟了 jest.setup.js 文件中的 react-native 导入，因此导致了问题

【讨论】：

成功了！