React Native 测试错误 - 无法在未安装的组件上找到节点

Question

我对测试 React 和 React Native 应用程序的知识非常有限。 所以我刚开始在我的 React Native 应用程序中设置一些测试。 我正在使用 expo，所以我安装了 jest，jest expo，react-test-renderer。 我想检查一个非常简单的测试，我认为这可能不是一个简单的测试，可能是因为导航，但无论如何我无法克服下面的这个错误。 我正在发布我的应用程序代码、测试和我看到的错误。

在 package.json

  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ],

应用组件

 import React from 'react';     
 import { createAppContainer } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import MemberHomeScreen from './src/screens/MemberHomeScreen';
 import SignUpScreen from './src/screens/SignUpScreen';
 import { setNavigator } from './src/navigationRef';
 import SignInScreen from './src/screens/SignInScreen';
 import HomeScreen from './src/screens/HomeScreen';
 import MemberDetailsScreen from './src/screens/MemberDetailsScreen';
        
        const appNavigator = createStackNavigator(
          {
            Home: HomeScreen, 
            MemberHome: MemberHomeScreen,
            SignUp: SignUpScreen,
            SignIn: SignInScreen,
            MemberDetails: MemberDetailsScreen
          },
          {
            initialRouteName: 'Home',
            defaultNavigationOptions: {
              title: '',
              headerLeft: () => false,
              headerTitleAlign: 'center'
            }
          }
        );
        
        const App = createAppContainer(appNavigator);
        export default () => {
          return <App ref={navigator => {setNavigator(navigator) }} />
        }

NavigationRef.js

import { NavigationActions } from 'react-navigation';

let navigator;
export const setNavigator = (nav) => {
  navigator = nav;
}

export const navigate = (routeName, params) => {
  navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  )
}

测试

import React from "react";
import renderer from "react-test-renderer";
import App from "../../App";

describe("App Component", () => {
    it('renders correctly', () => {
      const tree = renderer.create(<App />)
    });
});

任何想法我做错了什么？ 感谢任何指导。 谢谢！

Answer 1

更新我的依赖项后，我遇到了同样的错误。

测试运行良好后降级react-test-renderer从主要版本17回最新的16 。 即使当react和react-dom版本为 17 时看起来也不错，尽管会有不正确的对等依赖警告。

Answer 2

刚刚将我的 React-Native 版本升级到 64.2 后遇到了这个问题 将react-test-renderer升级到最高的公共版本，目前是17.0.2有帮助。

Answer 3

这也让我抓狂了几次，所以要检查的一件事是您使用的是最新的语法。 对我来说，我使用的是 React Native 测试库： https://testing-library.com/docs/react-native-testing-library/example-intro/

在为单个组件编写多个测试时，我还遇到了Unable to find node on an unmounted component错误。 事实证明我没有在正确的位置调用渲染 function。 我倾向于使用describe和it ，因此在it function 之外调用 render function，而实际上它应该这样写：

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

const props = {
  title: 'Example Title',
  body: 'Example body text',
};

describe('Example Component', () => {
  it('should match snapshot', async () => {
    render(<ExampleComponent {...props} />);
    expect(screen.toJSON()).toMatchSnapshot();
  });

  it('should render title', async () => {
    render(<ExampleComponent {...props} />);
    const exampleComponentTitle = await screen.findByTestId('example-component-title');
    expect(exampleComponentTitle).toBeDefined();
  });

  it('should render body', async () => {
    render(<ExampleComponent {...props} />);
    const exampleComponentBody = await screen.findByTestId('example-component-body');
    expect(exampleComponentBody).toBeDefined();
  });
});