开玩笑：React-native：TypeError：无法读取未定义的属性（读取“testEnvironmentOptions”）

Question

我正在尝试在基于博览会的新创建的反应本机应用程序上设置测试环境。

\n

它的 package.json 文件是

\n

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

\n

还有jest.config.js文件是

\n

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

\n

我尝试再次运行单元测试的示例组件是

\n

import { Text, View } from \'react-native\'\n\nconst HelloWorld = () => (\n  <View>\n    <Text>Hello World!</Text>\n  </View>\n)\n\nexport default HelloWorld\n\n

\n

测试代码是

\n

import { render } from \'@testing-library/react-native\'\nimport HelloWorld from \'./HelloWorld\'\n\ndescribe(\'<HelloWorld />\', () => {\n  it(\'should match snapshot\', () => {\n    const { toJSON } = render(<HelloWorld />)\n    expect(toJSON()).toMatchSnapshot()\n  })\n})\n

\n

当我尝试跑步时npm run test出现以下错误

\n

$ \xe2\x9c\x97 npm run test\n\n> react-native-application@1.0.0 test\n> jest\n\n FAIL  src/components/HelloWorld.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: Cannot read properties of undefined (reading \'testEnvironmentOptions\')\n\n      at new NodeEnvironment (node_modules/jest-environment-node/build/index.js:96:49)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.032 s\n

\n

任何解决此问题的帮助都会很棒。

\n

Answer 1

问题是jest和的版本不同jest-config。

由于我使用的26.6.3是 版本，所以我还jest需要安装版本而不是最新版本。jest-config26.6.3

新的 package.json 如下所示

{
  "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
}