我正在尝试在我的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();
});
});
});