浅呈现依赖于TweenLite的组件 [英] Shallow rendering a component which depends on TweenLite

问题描述

我正在尝试使用React组件进行简单的单元测试，但我不断得到:

I'm trying to make a simple unit test with a React component but I keep getting:

C:\work\portfolio\node_modules\gsap\TweenMax.js:13
    import TweenLite, { TweenPlugin, Ease, Power0, Power1, Power2, Power3, Power4, Linear } from "./TweenLite.js";
           ^^^^^^^^^

导入"App"组件的子组件的第3方库中的一个是错误的.

Which is an error with an import of one of children's of 'App' components 3rd party libraries.

import React from "react";
import { shallow } from 'enzyme';
import App from "./App";

fit("renders without crashing", () => {
  const wrapper = shallow(<App />);
});

app.js

import React from "react";
import "./App.css";
import ChronologyGraph from "./chronology/ChronologyGraph";
import { nodeTypes, milestones } from "../staticData";

const App = () => (
  <ChronologyGraph
    width="700"
    height="800"
    nodeSize={10}
    milestones={milestones.reverse()}
    columns={nodeTypes}
  />
);

export default App;

package.json:

package.json:

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "font-awesome": "^4.7.0",
    "gsap": "^2.0.1",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-fontawesome": "^1.6.1",
    "react-scripts": "^1.1.5",
    "react-transition-group": "^2.4.0",
    "typeface-lato": "0.0.54",
    "typeface-roboto": "0.0.54",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "lint": "eslint src",
    "test": "react-scripts test --env=jsdom",
    "testCov": "react-scripts test --env=jsdom --coverage",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.9.1",
    "prettier-eslint": "^8.8.2"
  }
}

我在网上找不到任何类似的例子，我是否应该以某种方式嘲笑孩子的进口?我认为浅"渲染将不会导入儿童，因此不会导入儿童

I couldn't find any similar examples online, am I supposed to somehow mock the import of a child? I thought 'shallow' render wouldn't import children and thus children's imports

推荐答案

(此处为酶维护者)

第三方模块应该在预发布时进行编译-因为在node_modules上运行babel是不安全的，并且node不支持import.您基本上有以下选择:

Third party modules should be transpiled prepublish - since it's not safe to run babel on node_modules, and since node doesn't support import. You have basically these options:

1. 在gsap上提交问题，以便他们正确地转译为预发布
2. 配置babel以排除node_modules(默认值)，但包括此模块
3. 配置玩笑以模拟gsap与其他东西

1. file an issue on gsap so they properly transpile prepublish
2. configure babel to exclude node_modules (the default) but to include this module
3. configure jest to mock out gsap with something else

这篇关于浅呈现依赖于TweenLite的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！