TypeError:无法读取未定义的属性'viewManagersNames'-将Jest和Enzyme与React Native TypeScript软件包集成

时间:2019-10-12 06:06:50

标签: typescript react-native jestjs expo enzyme

我正在尝试在我的React-Native Typescript软件包中将Jest单元测试与Enzyme集成在一起,但是在阅读了文档和教程之后,我似乎无法使其工作。

仅当使用LinearGradient中的expo-linear-gradient时问题才会发生
配置文件设置(见下文)后,运行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();
    });
  });
});

0 个答案:

没有答案