TypeError：无法读取未定义的属性“viewManagersNames” - 将 Jest 和 Enzyme 与 React Native TypeScript 包集成

Posted 2023-02-19

【中文标题】TypeError：无法读取未定义的属性“viewManagersNames” - 将 Jest 和 Enzyme 与 React Native TypeScript 包集成

【英文标题】：TypeError: Cannot read property 'viewManagersNames' of undefined - Integrating Jest and Enzyme with React Native TypeScript Package

【发布时间】：2020-02-09 13:52:14

【问题描述】：

我正在尝试在我的 React-Native Typescript 包上将 Jest 单元测试与 Enzyme 集成，但在阅读了文档和教程后，我似乎无法使其工作。问题只有在使用expo-linear-gradient 中的LinearGradient 时才会发生。 配置文件设置后（见下文），运行 npm test 会引发错误：

TypeError: Cannot read property 'viewManagersNames' of undefined at 
requireNativeViewManager (node_modules/@unimodules/react-native- 
adapter/src/NativeViewManagerAdapter.tsx:26:10) at Object.<anonymous> 
(node_modules/expo-linear-gradient/src/NativeLinearGradient.ios.tsx:20:59) 
at Object.<anonymous> (node_modules/expo-linear- 
gradient/src/LinearGradient.tsx:5:34).

我已尝试链接 @unimodules/react-native-adapter，因为它似乎是导致问题的原因，但随后出现错误：

SyntaxError: Unexpected token 

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (node_modules/@unimodules/core/src/AdapterProxy.ts:1:50)

package.json：

   ...
  "scripts": 
    "build": "tsc",
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
    "lint": "tslint -p tsconfig.json",
    "test": "jest --config jest.config.json --detectOpenHandles",
    "prepare": "npm run build",
    "prepublishOnly": "npm test && npm run lint",
    "preversion": "npm run lint",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  ,
  "devDependencies": 
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.6.3",
    "@types/enzyme": "^3.10.3",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/jest": "^24.0.18",
    "@types/react": "^16.9.5",
    "@types/react-native": "^0.60.19",
    "@types/react-test-renderer": "^16.9.0",
    "@unimodules/core": "^4.0.0",
    "@unimodules/react-native-adapter": "^4.0.0",
    "babel-jest": "^24.9.0",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.0",
    "enzyme-to-json": "^3.4.2",
    "install": "^0.13.0",
    "jest": "^24.9.0",
    "jest-expo": "^35.0.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "npm": "^6.12.0",
    "prettier": "^1.18.2",
    "react": "16.10.2",
    "react-dom": "16.10.2",
    "react-native": "0.61.2",
    "react-native-renderer": "^15.5.3",
    "react-test-renderer": "^16.10.2",
    "ts-jest": "^24.1.0",
    "tslint": "^5.20.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.6.3"
  ,
  "dependencies": 
    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
    "expo-linear-gradient": "^7.0.1",
    "lodash": "^4.17.14"
  ,
  "peerDependencies": 
    "react": "*",
    "react-dom": "*",
    "react-native": "*"
  

jest.config.json：

  "preset": "react-native",
  "transform": 
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
    "\\.(ts|tsx)$": "ts-jest"
  ,
  "setupFiles": ["./src/setupTests.js"],
  "globals": 
    "ts-jest": 
      "tsConfig": "tsconfig.jest.json"
    
  ,
  "transformIgnorePatterns": [
    "node_modules/(?!(react-native|react-native-skeleton-content|expo-linear-gradient|@unimodules/core)/)"
  ],
  "moduleFileExtensions": ["ts", "tsx", "js"],
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"

babel.config.js：

module.exports = 
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
  ],
;

setupTests.js：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure( adapter: new Adapter() );

tsconfig.jest.json：

  "extends": "./tsconfig",
  "compilerOptions": 
    "jsx": "react",
    "module": "commonjs"
  

tsconfig.json：

  "compilerOptions": 
    "target": "es5",
    "module": "commonjs",
    "jsx": "react-native",
    "noEmit": true,
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "exclude": ["node_modules"]
  

SkeletonContent.test.tsx：

import React from 'react';
import  SkeletonContent  from '../SkeletonContent';
import  shallow  from 'enzyme';

describe('SKC', () => 
  const wrapper = shallow<SkeletonContent>(<SkeletonContent />);

  describe('rendering', () => 
    it('is defined', () => 
      expect(wrapper).toBeDefined();
    );
  );
);

【问题讨论】：

您能找到解决方案吗？

只是想碰一下 - 有没有人找到解决方案？

您找到解决方案了吗？我正在使用 expo-apple-authentication 并且我的玩笑给出了同样的错误，尽管我已经忽略了 expo-apple-authentication 和 @unimodules

我遇到了同样的错误

撞！我也遇到了同样的错误。如果有人找到解决方案，请报告！

【参考方案1】：

我找到了一个对我有用的解决方法。

我所要做的就是将我的 jest 预设从 react-native（expo 所说的设置）更改为 jest-expo，并添加推荐的 transformationIgnorePatterns。在我的 package.json 中：

  "jest": 
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  ,