简单jest测试中无效的返回值

Question

我正在测试Home组件的视图，以响应Native0.68.2/jest29.0。简单的测试用例是从jest doc复制的：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { render, cleanup, screen, fireEvent } from "@testing-library/react-native";
import App from '../App';

describe ('App ', () => {
    //afterEach(cleanup);
    test ('shall stack screens', async () => {
        const component = (<NavigationContainer>
                             <App />
                            </NavigationContainer>);
        const {getByText} = render(component);

        await waitFor(() => getByText('AppSplash'));
        

    })
})

下面是App.js：

 import React, {useState, useContext, Component} from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SplashScreen from './src/components/splashscreen/SplashScreen';
 import SysError from './src/components/app/SysError';
 import Bye from "./src/components/app/Bye";
 import Verif1 from './src/components/signup/Verif1';
 import Signup from './src/components/signup/Signup';
 import TermCondition from './src/components/common/TermCondition';
 import AppScreen from "./src/components/app/AppScreen";

 
 const Stack = createStackNavigator();
 
 export default function App() {
   return (
    
     <SafeAreaProvider>
       <NavigationContainer>
         <Stack.Navigator InitialRouteName="AppSplash">
          <Stack.Screen name="AppSplash" component={SplashScreen} options={{headerShown:false}}/>
           <Stack.Screen name="AppSysError" component={SysError} options={{headerShown:false}} />
           <Stack.Screen name="AppScreen" component={AppScreen} options={{headerShown:false}} />
           <Stack.Screen name="AppVerif1" component={Verif1} options={{headerShown:false}} />
           <Stack.Screen name="AppSignup" component={Signup} options={{headerShown:false}} />
           <Stack.Screen name="TermCondition" component={TermCondition} options={{headerShown:false}} />
           <Stack.Screen name="Bye" component={Bye} options={{headerShown:false}} />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaProvider>
     
   );
 };

这是yarn jest的输出。

● Invalid return value:
      `process()` or/and `processAsync()` method of code transformer found at 
      "/Users/macair/Documents/code/js/xyz_app6/node_modules/react-native/jest/assetFileTransformer.js" 
      should return an object or a Promise resolving to an object. The object 
      must have `code` property with a string of processed code.
      This error may be caused by a breaking change in Jest 28:
      https://jestjs.io/docs/upgrading-to-jest28#transformer
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation

我刚开始使用jest，没有一个解决方案发现这个错误有效。

Answer 1

错误process() or/and processAsync() method of code transformer found at表明问题是jest，v28.x不支持react本机v68.x。您要么需要降级到开玩笑v27.x，要么升级以响应-本机v70.x。

请参见对react本机github：https://github.com/facebook/react-native/commit/b5ff26b0b97d6cd600bdb9c33af866971ef14f9c的提交。

Jest 28删除了对在转换器(https://jestjs.io/docs/upgrading-to-jest28#transformer)的进程方法中返回字符串的支持。

此PR更改assetFileTransformer以返回对象而不是字符串。

以上提交是针对您所看到的问题的修复。它被合并了。如果您仔细查看提交消息，您将在该消息下面找到与提交相关的标记列表。这些标记将告诉您哪些版本包含此提交。

提交消息显示以下标记。

 v0.70.1  v0.70.0 v0.70.0-rc.4 v0.70.0-rc.3 v0.70.0-rc.2 v0.70.0-rc.1 v0.70.0-rc.0 latest

这些标记告诉我们，提交首先进入了0.70版本候选版本，最终进入了0.70稳定版本。正如你所预期的，它也存在于0.70.1的稳定中。

有关https://reactnative.dev/contributing/release-faq版本的更多信息，请参见

要么升级为Reactive70.x，要么将Jest降级为27.x.