Я пытаюсь настроить тестирование фермента для своего проекта React Native.Я получаю различные ошибки в различных сценариях.
Сценарий 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);
});
});
jest.config.js
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"]
};
};
package.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"
]
}
}
setup.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";
Сценарий 2
Так что это проблема, но потом происходит еще кое-что интересное.Когда я заменяю свой LoginView на супер простой компонент, тест запускается, но выявляет некоторые новые ошибки, которые вызывают подозрения в моей настройке рендеринга.
SimpleView.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