情景1
当我尝试为某个组件设置测试时,会出现以下错误:
/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);
});
});
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"
]
}
}
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";
情景2
所以这是一个问题,但后来发生了其他有趣的事情。当我换掉我的
LoginView
对于一个超级简单的组件,测试会运行,但是会出现一些新的错误,这些错误会对我的渲染设置产生一些怀疑。
简单视图.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
