Invalid return value in simple jest test - jestjs

Question

I am testing a view for Home component for React Native 0.68.2/jest 29.0. The simple test case is copied from 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'));
})
})
Here is the 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>
);
};
Here is the output of 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
I just started using jest and none of solutions found this error works.

Answer 1

The error process() or/and processAsync() method of code transformer found at indicates that the issue is jest v28.x doesn't support react-native v68.x. You will either need to downgrade to jest v27.x or upgrade to react-native v70.x.
See this commit on the react-native github: https://github.com/facebook/react-native/commit/b5ff26b0b97d6cd600bdb9c33af866971ef14f9c
Jest 28 removed support for returning a string in the process method of a transformer (https://jestjs.io/docs/upgrading-to-jest28#transformer).
This PR changes assetFileTransformer to return an object instead of a string.
The above commit is a fix for the issue you are seeing. It was merged in. If you look closely at the commit message, underneath which you will find a list of tags associated with the commit. These tags will tell you which releases contain this commit.
The commit message shows the below tags.
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
These tags tell us that the commit first made it into the 0.70 release candidate, eventually landing in the 0.70 stable release. It is also present, as you'd expect, in the 0.70.1 stable.
See for more info on releases https://reactnative.dev/contributing/release-faq
Either upgrade to react-native 70.x or downgrade Jest to 27.x.