ReferenceError: expect is not defined ( react-native , @testing-library/react-native )

Question

I have been facing two issues mainly

console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in 
  components) or a class/function (for composite components) but got: undefined. You 
  likely forgot to export your component from the file it's defined in, or you might 
   have mixed up default and named imports.

  19 |
  20 | test('renders the Example component and simulates a button press', () => {
> 21 |   const {getByTestId, getByText} = render(<Example />);

and

 FAIL  __tests__/Example1.js
  ● Test suite failed to run

  ReferenceError: expect is not defined

It seems possibly that render and expect from testing library are not properly set. i have tried a couple of fixes but noting seems to work.

can you please help me find the issue in my setup.

jest.setup.js

import 'react-native';
import React from 'react';
import 'react-native-gesture-handler/jestSetup';
import '@testing-library/jest-native/extend-expect';

jest.mock('react-native-bootsplash', () => ({
  hide: jest.fn(),
  show: jest.fn(),
}));

jest.mock('@react-native-firebase/messaging', () => ({
   onMessage: jest.fn(),
   getToken: jest.fn(),
}));
// a few more mock tests

jest.config.js

module.exports = {
preset: 'react-native',
setupFilesAfterEnv: ["./jest.setup"],
transformIgnorePatterns: [
      'node_modules/(?!(react-native|@react-native|i18n-js|@react-navigation|react- 
      native-keychain|@react-native-firebase|react-native-polyfills|react-native- 
      config|react-native-encrypted-storage|react-native-version-check|react-native- 
      device-info|react-native-flipper|redux-flipper|react-native-modal|react-native- 
      toast-message|@react-native|react-native-gesture-handler|react-native- 
      animatable|react-native-biometrics|react-native-phone-number-input|react- 
      native-confirmation-code-field|react-native-webview|react-native-document- 
      picker|react-native-image-picker|react-native-permissions|react-native- 
      recaptcha-that-works|react-native-file-viewer|react-native-image-zoom- 
      viewer|rn-fetch-blob|react-native-parsed-text|react-native-restart|react- 
      native-wheel-picker-android|react-native-skeleton-placeholder|@react-native- 
      masked-view/masked-view|react-native-linear-gradient||react-native-image- 
      slider-box|react-native-vector-icons|@sentry/react-native|react-native-radio- 
      buttons-group|@notifee/react-native|react-native-push-notification||react- 
      native-image-progress|react-native-progress||react-native-swipe-list- 
      view|react-native-date-picker|@ptomasroos/react-native-multi-slider|react- 
      native-select-dropdown|react-native-base64|react-native-gifted-charts|react- 
      native-android-open-settings|react-native-signature-canvas|react-native- 
      maps|react-native-open-maps|react-native-gifted-chat|react-native-rsa- 
      native|react-native-dropdown-picker|lottie-react-native|react-native-app-intro- 
      slider|react-native-code-push|react-native-splash-screen|@react-native- 
      community/netinfo|jail-monkey|@testing-library/react-native|@testing- 
      library/jest-native)/)',
    ],
moduleNameMapper: {
  '^react-native$': '<rootDir>/__mocks__/react-native.js',
  'react-native-vector-icons/(.*)$': '<rootDir>/__mocks__/react-native-vector- 
    icons.js',
  "^@sentry/react-native$": "<rootDir>/__mocks__/@sentry/react-native.js"
 },
transform: {
   '^.+\\.[jt]sx?$': 'babel-jest',
 },
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node','svg'],
moduleDirectories: ['node_modules', 'src'],

};

** babel.config.js **

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-transform-class-properties', { loose: true }],
    ['@babel/plugin-transform-private-methods', { loose: true }],
    ['@babel/plugin-transform-private-property-in-object', { loose: true }]
   ],
 env: {
   production: {
     plugins: ['transform-remove-console'],
   },
  },
};

** Example component **

import React from 'react';
import {Button, Text, View} from 'react-native';
import {render, fireEvent} from '@testing-library/react-native';

 function Example() {
   return (
     <View>
      <Button
       title="Print Username"
       onPress={() => {
         console.log('hi');
       }}
      />
      <Text testID="printed-username">hi</Text>
     </View>
   );
 }

 test('renders the Example component and simulates a button press', () => {
    const {getByTestId, getByText} = render(<Example />);

    const printedUsername = getByTestId('printed-username');
    expect(printedUsername.props.children).toBe('hi');

    // Simulate the button press
    const button = getByText('Print Username');
    fireEvent.press(button);
   // jest.spyOn(console, 'log').mockImplementation(() => {});
});

i have tried importing expect but still the issue been found .

import { expect } from '@jest/globals';

** Package.json **

   "@testing-library/jest-native": "^5.4.3",
   "@testing-library/react-native": "^12.7.2",
   "react": "18.2.0",
   "react-native": "0.71.6",
   "@babel/core": "^7.25.8",
   "@babel/plugin-transform-class-properties": "^7.25.7",
   "@babel/plugin-transform-private-methods": "^7.25.7",
   "@babel/plugin-transform-private-property-in-object": 
     "^7.25.8",
   "@babel/preset-env": "^7.20.0",
   "@babel/preset-react": "^7.25.7",
   "@babel/runtime": "^7.20.0",
   "jest": "^29.7.0",
   "react-test-renderer": "^18.3.1",

Update

i found that @testing-library/jest-native is deprecated , so i have removed it from my project

jest.setup.js

import '@testing-library/jest-native/extend-expect'; // removed
import '@testing-library/react-native/extend-expect'; // added

also updated my react version to "react": "18.3.1"