I am trying to set up the test environment on a newly created react native application based on the expo.

The package.json file for it is

{
  "name": "react-native-application",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "lint": "eslint --ext .jsx,.js,.ts,.tsx,.d.ts .",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
  },
  "dependencies": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@react-native-community/eslint-config": "^3.0.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/jest-native": "^4.0.5",
    "@testing-library/react-native": "^9.1.0",
    "@types/jest": "^28.1.0",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.25.0",
    "@typescript-eslint/parser": "^5.25.0",
    "core-js": "^3.22.8",
    "eslint": "^8.15.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "eslint-plugin-react-native": "^4.0.0",
    "jest": "^26.6.3",
    "jest-config": "^28.1.0",
    "jest-expo": "^45.0.1",
    "prettier": "^2.6.2",
    "react-test-renderer": "^17.0.2",
    "typescript": "~4.3.5"
  },
  "private": true
}

And the jest.config.js file is

const { defaults } = require('jest-config')

module.exports = {
  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)',
  ],
  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
  setupFiles: ['<rootDir>/jest/setup.js'],
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', 'core-js'],
  testPathIgnorePatterns: [
    '<rootDir>/.expo/',
    '<rootDir>/node_modules/',
    '<rootDir>/web-build/',
  ],
}

And the example component for which I am trying to run unit test agains is

import { Text, View } from 'react-native'

const HelloWorld = () => (
  <View>
    <Text>Hello World!</Text>
  </View>
)

export default HelloWorld

and the test code is

import { render } from '@testing-library/react-native'
import HelloWorld from './HelloWorld'

describe('<HelloWorld />', () => {
  it('should match snapshot', () => {
    const { toJSON } = render(<HelloWorld />)
    expect(toJSON()).toMatchSnapshot()
  })
})

When I try to run npm run test I get the following error

$ ✗ npm run test

> [email protected] test
> jest

 FAIL  src/components/HelloWorld.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'testEnvironmentOptions')

      at new NodeEnvironment (node_modules/jest-environment-node/build/index.js:96:49)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.032 s

Any help on fixing this would be great.

CodePudding user response：

The problem was different versions of jest and jest-config.

As I was using 26.6.3 version of jest I needed to install jest-config also of 26.6.3 version instead of the latest version.

The new package.json was looking like below

{
  "name": "react-native-application",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "lint": "eslint --ext .jsx,.js,.ts,.tsx,.d.ts .",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
  },
  "dependencies": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@react-native-community/eslint-config": "^3.0.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/jest-native": "^4.0.5",
    "@testing-library/react-native": "^9.1.0",
    "@types/jest": "^28.1.0",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.25.0",
    "@typescript-eslint/parser": "^5.25.0",
    "core-js": "^3.22.8",
    "eslint": "^8.15.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "eslint-plugin-react-native": "^4.0.0",
    "jest": "^26.6.3",
    "jest-config": "^26.6.3",
    "jest-expo": "^45.0.1",
    "prettier": "^2.6.2",
    "react-test-renderer": "^17.0.2",
    "typescript": "~4.3.5"
  },
  "private": true
}