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

处于版本 17，看起来也很好，尽管会出现不正确的对等依赖警告。

Answer 2

react-test-renderer

升级到最高公开版本，目前是 17.0.2 有所帮助。

Answer 3

https://testing-library.com/docs/react-native-testing-library/example-intro/

在为单个组件编写多个测试时，我也遇到了

react-dom

错误。事实证明我没有在正确的位置调用渲染函数。我倾向于使用

Unable to find node on an unmounted component

和

describe

，因此在

it

函数之外调用渲染函数，而实际上应该这样写：it

Answer 4

使用

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();
  });
});

1. 而不是

   test.only(...)

   或

   test

   仅运行该测试。如果它以这种方式工作，则可能意味着其他测试会干扰此测试。就我而言，是常见的 redux 存储造成了错误。我刚刚为每个测试创建了模拟商店。