为什么开玩笑的测试不能识别 React Native 组件？

Question

我有一个反应本机应用程序，我正在尝试运行测试，我已经设置了一个基本的问候语组件，如下所示，名为 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 本机组件，这是运行测试时的错误：

 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)

它显示视图组件的相同错误。它不应该在初始设置后自动识别这些组件吗？我已经安装了以下内容：纱线添加安装-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"
    ]
  }

Answer 1

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

您可以使用 getByText query which can be obtained from 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();
 
  });
});

Answer 2

该应用程序是前一段时间设置的，他们似乎模拟了 jest.setup.js 文件中的 react-native 导入，因此导致了问题

为什么开玩笑的测试不能识别 React Native 组件？

Why is jest test not recognizing react native components?

reactjs

jestjs

react-native