我正在尝试为我的 React Native 项目设置 enzyme 测试。我在各种情况下都遇到了各种错误。
场景一
当我尝试为我的一个组件设置测试时，出现以下错误:
/Users/TuzMacbookPro2017/Development/QMG-local/APPS/ELECTRO/node_modules/@expo/vector-icons/Zocial.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Zocial.json';
^^^^^^^^
SyntaxError: Unexpected identifier
一些相关文件
测试文件
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import LoginView from "../src/screens/LoginView";
describe("LoginView", () => {
const wrapper = mount(<LoginView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
Jest 配置文件
module.exports = {
setupFilesAfterEnv: ["<rootDir>setup-tests.js"],
transformIgnorePatterns: [
"node_modules/(?!(jest-)?react-native|@react-native-community|react-native-elements)"
],
preset: "react-native"
};
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ["babel-preset-expo"]
};
};
包.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll --bail",
"testff": "node ./node_modules/jest/bin/jest.js --watchAll --bail"
},
"jest": {
"preset": "jest-expo",
"testEnvironment": "node",
"globals": {
"__DEV__": true
}
},
"dependencies": {
"@expo/samples": "2.1.1",
"@react-native-community/async-storage": "^1.3.4",
"axios": "^0.18.0",
"expo": "^32.0.0",
"flow-bin": "^0.98.1",
"native-base": "^2.12.1",
"pluralize": "^7.0.0",
"react": "16.5.0",
"react-dom": "^16.8.6",
"react-native": "0.57",
"react-native-elements": "^1.1.0",
"react-native-geocoding": "^0.3.0",
"react-native-global-font": "^1.0.2",
"react-native-indicators": "^0.13.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-render-html": "^4.1.2",
"react-native-uuid": "^1.4.9",
"react-navigation": "^3.9.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-saga": "^1.0.2",
"redux-test-utils": "^0.3.0",
"redux-thunk": "^2.3.0",
"sugar": "^2.0.6"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"axios-mock-adapter": "^1.16.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-preset-expo": "^5.0.0",
"babel-preset-react-native": "^4.0.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"fetch-mock": "^7.3.3",
"jest": "^24.8.0",
"jest-enzyme": "^7.0.2",
"jest-expo": "^32.0.0",
"jsdom": "^14.1.0",
"mock-async-storage": "^2.1.0",
"prettier-eslint": "^8.8.2",
"react-test-renderer": "^16.8.6",
"redux-mock-store": "^1.5.3",
"redux-saga-tester": "^1.0.460"
},
"private": true,
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
设置.tests.js
import Adapter from "enzyme-adapter-react-16";
import { configure } from "enzyme";
import jsdom from "jsdom";
import "react-native";
import "jest-enzyme";
function setUpDomEnvironment() {
const { JSDOM } = jsdom;
const dom = new JSDOM("<!doctype html><html><body></body></html>", {
url: "http://localhost/"
});
const { window } = dom;
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: "node.js"
};
copyProps(window, global);
}
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === "undefined")
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
setUpDomEnvironment();
configure({ adapter: new Adapter() });
从被测组件导入
import React, { Component } from "react";
import {
Image,
Input,
Button,
ThemeProvider,
Overlay
} from "react-native-elements";
import { View, Text, Picker } from "react-native";
import { DotIndicator } from "react-native-indicators";
import { connect } from "react-redux";
import { login, assignUser } from "../redux/actions/authActions";
import F8StyleSheet from "../components/F8StyleSheet";
import { Dropdown } from "react-native-material-dropdown";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";
import User from "../models/User";
import uuid from "react-native-uuid";
场景二
所以这是一个问题，但随后发生了其他有趣的事情。当我换掉我的
LoginView对于一个 super 简单的组件，测试运行，但带来了一些新的错误，让我对我的渲染设置产生怀疑。简单 View .js
import React from "react";
import { Text, View } from "react-native";
export default (SimpleView = ({ params }) => (
<View>
<Text>SimpleView</Text>
</View>
));
测试
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import SimpleView from "./__mocks__/SimpleView";
describe("LoginView", () => {
const wrapper = mount(<SimpleView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
错误
PASS tests/LoginView.test.js (6.058s)
LoginView
✓ can get through the damn test file (4ms)
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <Text /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <Text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <View /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <View> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
最佳答案
您的问题的原因之一可能是 "preset": "react-native"线路在您的 jest.config.js .尝试将其更改为 "preset": "jest-expo" .这是 expo 文档 ( https://docs.expo.io/versions/v35.0.0/guides/testing-with-jest/ ) 解释如何在您的项目中设置 jest 的方式。
关于react-native - 将 Enzyme 与 React Native 一起使用时的错误(导入字形图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56419465/