Description
Ask your Question
I'm trying to introduce testing with jest and react-native-testing-library. After a lot of initial issues around required transformers and jest configurations, I am now stuck with this issue that I can't seem to figure out. Not sure if I'm maybe misunderstanding intended usage here. What's interesting is that the only reference I could find to this this error message was in this recent PR.
The error
FAIL src/test/e2e/TestAuthenticationFlow.test.tsx
Authentication Flow
Test user sign up flow
✕ User can sign up with valid credentials (528 ms)
● Authentication Flow › Test user sign up flow › User can sign up with valid credentials
'container' property has been renamed to 'UNSAFE_root'.
Consider using 'root' property which returns root host element.
19 | describe("Test user sign up flow", () => {
20 | test("User can sign up with valid credentials", async () => {
> 21 | const app = render(<App />);
| ^
22 | console.log(app);
23 |
24 | expect(1).toBe(1);
The Code
TestAuthenticationFlow.test.tsx
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react-native";
import App from "App";
describe("Authentication Flow", () => {
test("Test user sign up flow", () => {
const app = render(<App />);
console.log(app);
expect(1).toBe(1);
});
});
App.tsx
// Root App
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { StackRouter } from "src/routes/stackRouter";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { Provider } from "react-redux";
import { store } from "src/state/store";
import { LogBox } from "react-native";
LogBox.ignoreLogs([
"Non-serializable values were found in the navigation state",
]);
const App = () => {
return (
<SafeAreaProvider>
<Provider store={store}>
<NavigationContainer>
<StackRouter />
</NavigationContainer>
</Provider>
</SafeAreaProvider>
);
};
export default App;
package.json
{
"name": "Customer",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-firebase/app": "^17.3.1",
"@react-native-firebase/messaging": "^17.3.1",
"@react-navigation/bottom-tabs": "^6.5.3",
"@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.8",
"@rneui/base": "^0.0.0-edge.2",
"@rneui/themed": "^0.0.0-edge.2",
"@stripe/stripe-react-native": "^0.24.0",
"@types/ws": "^8.5.4",
"amazon-cognito-identity-js": "^6.1.2",
"aws-sdk": "^2.1302.0",
"google-libphonenumber": "^3.2.31",
"react": "18.2.0",
"react-native": "0.71.1",
"react-native-btr": "^2.2.0",
"react-native-config": "^1.4.12",
"react-native-date-picker": "^4.2.6",
"react-native-dropdown-picker": "^5.4.4",
"react-native-fast-image": "^8.6.3",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.6.2",
"react-native-modal": "^13.0.1",
"react-native-open-notification": "^0.1.4",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.19.0",
"react-native-vector-icons": "^9.2.0",
"react-redux": "^7.2.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"ws": "^8.12.1"
},
"devDependencies": {
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.0.0",
"@testing-library/jest-native": "^5.4.2",
"@testing-library/react-native": "^12.0.0-rc.0",
"@tsconfig/react-native": "^2.0.2",
"@types/google-libphonenumber": "^7.4.23",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"@types/uuid": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^5.15.0",
"@typescript-eslint/parser": "^5.15.0",
"eslint": "^8.19.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.7",
"node-sass": "^7.0.1",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"sass": "^1.57.1",
"stylelint": "^14.9.1",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^26.0.0",
"typescript": "4.8.4"
},
"jest": {
"preset": "react-native",
"moduleDirectories": [
"node_modules",
"<rootDir>"
],
"setupFiles": [
"./__mocks__/async-storage.ts",
"./__mocks__/EventEmitter.ts",
"./__mocks__/stripe.ts"
],
"setupFilesAfterEnv": [
"@testing-library/jest-native/extend-expect"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
},
"transformIgnorePatterns": [
"node_modules/?!(@rneui)",
"jest-runner"
]
}
}
assetsTransformer.js
const path = require("path");
module.exports = {
process(src, filename, config, options) {
return "module.exports = " + JSON.stringify(path.basename(filename)) + ";";
},
};