Jest with React Native Expo (unit testing)

Get started with Jest unit testing with React Native Expo. Make sure to watch the entire video. There are some instructions you'll need to follow that are not mentioned in the Expo Jest setup documentation.
Link to Expo Jest Documentation: docs.expo.dev/...
GitHub Code: github.com/Nat...
-- React Native Expo videos -------------------------
Learn React Native in 47 Minutes: • Learn React Native Exp...
React GlobalState: • React Global State Man...
React Native Push Notifications in 2:15 Minutes: • React Native Push Noti...
Expo Push Notifications (2022): • Expo Push Notification...
Expo Notifications for iOS + EAS Build iOS: • Expo Notifications for...
Expo Notifications for Android +: EAS Build iOS: • Expo Notifications And...
Expo Push Notification in 1 Minute?: • Expo Push Notification...
React Native Tutorial for Beginners (2022): • React Native Tutorial ...
Expo Push Notifications React Native (2022): • Expo Push Notification...
Indie Push Notifications | Expo | React Native: • Indie Push Notificatio...
Expo Analytics: • Expo Analytics | React...
React Native Tutorial for Beginners (2021): • React Native Tutorial ...
-- TypeScript videos -------------------------------------
Learn TypeScript: Why or Why Not? (React, React Native, Expo): • Should you learn TypeS...
Why learn TypeScript Short: • TypeScript: Why or Why...
-- Random videos -----------------------------------------
Replit mobile app first look: • Replit mobile app firs...
Meta Quest Pro & Mario: • Video
-- FingoBox videos ------------------------------------
React Native Expo Database (Serverless) | SQL Alternative: • React Native Expo Data...
FingoBox.com | A New Kind of Database: • FingoBox | API Databas...
#jest #reactnative #expo #unittesting

[@BillAllen]

Great video. You helped me get through setup and config and to eliminate 'SyntaxError: Cannot use import statement outside a module'

[@p_p3368]

Hey ...I am getting the same error in cli how to resolve it?

[@teachyourselfcs]

Thanks man you really walk through all the issues I was having when getting started 👍

[@MisterCK124]

Great explanation, was struggling with this for a bit (was trying to run test for react-native cli, instead of expo I think). Very clear explanation! btw. that "tall line" is a pipe symbol.

[@pokeyanteater598]

Hi I followed the instructions and I still get:
SyntaxError: Cannot use import statement outside a module
Also the error is pointing to a .jsx component that I made myself. I tried adding the path to the transformIgnorePatterns but it didnt work.
Eventually, I just changed them all to .js files and it gets past those but has new issues with my firebase import:
SyntaxError: Unexpected token 'export'
import { initializeApp } from 'firebase/app'
Couldn't find a fix for this one

[@eves.2825]

I spend so long on this one. THANK YOU SO MUCH. I would have never found the "jsx" thing

[@immense_dreamer]

You can configure jest to take other types of files by adding jsx or tsx to the config list. By default it only reads js extensions.

[@chair6180]

Serious question, the command says to save jest and jest-expo as app dependencies. I am wondering, shouldn't both be under devDependencies? I don't want my app to ship with test packages.

[@chair6180]

What about the react-test-render?
But even the react native test library repo says to install the react-test-render under app dependencies.

[@nicholaspervez8442]

you're a legend mate, nice one!!

[@IdrisABDULKADRIKONDI]

Good .. kindly make more video on unit testing

[@MisterCK124]

suggestion for a follow up. Implenting and configuring the react-native testing library. I'm interested in that and there are not that many resources on it.

[@NativeNotify]

Thank! I'll try to find the time to make a video on the react-native testing library

[@vzletit7152]

Thank you for the explanation. I followed the guide, but unfortunately it does not cover the situation with same error as at 4:51 ( SyntaxError: Cannot use import statement outside a module ) when it points to ANY imported JSX module. (e.g: import Wtf from './Wtf'.jsx;). I spent 2 days googling it with no luck. :( AFAIK It somehow connected with Jest not supporting ESM out of the box, but the recipe given in Jest documentation did not not help me either.

[@NativeNotify]

Were you able to fix it after watching this video? All the packages you use will need to be added to that ignore object in the package.json to make the error go away. Yeah I couldn't find any documentation on it either

[@vzletit7152]

​ @Native Notify I finally managed it to work, but as I mentioned, the problem was not with importing packages, but with importing my own JSX modules. In fact the problem was to switch Jest to experimental ESM mode.
For those who's still struggling. Do check (in additional to docs):
+++ [babel.config.js] +++
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
+++[end]+++
+++ [ jest.config.js (note how "transform" property looks although docs tell you to disable it) ] +++
const config = {
preset: 'jest-expo',
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
],
transform: {
'^.+\\.[jt]sx?$': 'babel-jest',
},
};
module.exports = config;
+++[end]+++
"type": "module" NOT needed in package.json
Also make sure your Jest version IS the same with babel-jest and jest-environment-jsdom versions. In my case it was not obvious as another version of Jest was accidentally intalled globally and was called by npx instead of correct local version from package.json.

[@alihammad8667]

@@vzletit7152 I face the same issue

[@tirkdiamond]

@@vzletit7152 Thanks! This worked.

[@cfo3049]

Good job👍

[@omotolanishodunke9006]

Thank you 💛

[@NativeNotify]

You're welcome!

[@victorliradev782]

Thanks man

[@priyankas4303]

Good explanation 👏 👍

[@NativeNotify]

Thank you!

[@benjaminvenezia1944]

Thank's!

[@CanalFutilismo]

thanks

[@shinmini99]

👍👍