将 Enzyme 与 React Native 一起使用时的错误（导入字形图）

Question

我正在尝试为我的 React Native 项目设置酶测试。我在各种情况下都遇到了各种错误。

场景一

当我尝试为我的一个组件设置测试时，出现以下错误：

    /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

一些相关文件

测试文件

    /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);
  });
});

babel.config.js

module.exports = {
  setupFilesAfterEnv: ["<rootDir>setup-tests.js"],
  transformIgnorePatterns: [
    "node_modules/(?!(jest-)?react-native|@react-native-community|react-native-elements)"
  ],
  preset: "react-native"
};

包.json

module.exports = function(api) {
  api.cache(true);

  return {
    presets: ["babel-preset-expo"]
  };
};

设置.tests.js

{
  "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() });

场景二

所以这是一个问题，但随后发生了其他有趣的事情。当我更换LoginView一个超级简单的组件时，测试运行，但带来了一些新的错误，使我对渲染设置产生怀疑。

简单视图.js

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";

测试

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);
  });
});

Answer 1

您的问题的原因之一可能是"preset": "react-native"您的jest.config.js. 尝试将其更改为"preset": "jest-expo". 这是expo文档（https://docs.expo.io/versions/v35.0.0/guides/testing-with-jest/）解释如何在项目中设置jest的方式。