个人中心
gpt4 book ai didi

react-native - 将 Enzyme 与 React Native 一起使用时的错误(导入字形图)

转载 作者：行者123 更新时间：2023-12-04 05:24:15 24 4
gpt4 key购买 nike

我正在尝试为我的 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/

24 4 0
文章推荐： certificate - 未生成ApacheJMeterTemporaryRootCA.crt
文章推荐： react-native - 创建新的 native 应用程序从注册表收到格式错误的响应
文章推荐： joomla - fatal error : Call to a member function getKeyName()
文章推荐： scala - 等待所有的Future.onComplete回调执行完毕
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com