浅渲染依赖于 TweenLite 的组件答案

【问题标题】：Shallow rendering a component which depends on TweenLite浅渲染依赖于 TweenLite 的组件
【发布时间】：2019-05-20 12:48:44
【问题描述】：

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

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

这是导入“应用”组件的子组件之一的错误 3rd 方库。

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:

{
  "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"
  }
}

我在网上找不到任何类似的例子，我应该以某种方式模拟一个孩子的进口吗？我认为“浅”渲染不会导入儿童，因此不会导入儿童

【问题讨论】：

欢迎来到 SO！你能分享错误信息吗？ shallow 不渲染孩子，但孩子和依赖仍然是import-ed。
Test suite failed to run C:\work\portfolio\node_modules\gsap\TweenMax.js:13 import TweenLite, { TweenPlugin, Ease, Power0, Power1, Power2, Power3, Power4, Linear } from "./TweenLite.js"; ^^^^^^^^^ SyntaxError: Unexpected identifier - 这是确切的错误消息，第 3 方库之一中的“意外标识符”，您知道如何模拟该导入吗？
你能分享App.js和你的package.json吗？
你在 package.json 中添加了“transform”和“babel-jest”吗？
@brian-lives-outdoors 添加

标签： reactjs unit-testing jestjs gsap

【解决方案1】：

（这里是酶维持剂）

第三方模块应该在发布前进行转译——因为在 node_modules 上运行 babel 是不安全的，而且 node 不支持 import。您基本上有以下选择：

在gsap 上提交问题，以便他们正确地转译预发布
配置 babel 排除 node_modules（默认），但要包含这个模块
配置 jest 以用其他东西模拟 gsap

【讨论】：

谢谢，你介意给我一个简单的模拟 gsap 导入的例子吗？试了好几次都没用
我相信会是jest.mock('gsap', () => whateverMockYouWant);但你必须检查笑话文档

【解决方案2】：

遵循@ljharb 第三个选项：

如果您阅读 Jest documentation，您可以简单地模拟 GSAP，在 __mocks__ 目录中创建一个文件。

假设您正在导入 TweenMax，并且您想使用to 方法：

import { TweenMax } from "gsap/TweenMax";

将两个文件添加到 mocks 目录中。 TweenLite 可以为空。

.
└── __mocks__
    └── gsap
        └── TweenLite.js 
        └── TweenMax.js

module.exports = {
  TweenMax: class{
    static to(selector, time, options) {
      return jest.fn();
    }
  }
}

您已成功模拟您的 TweenMax.to 方法。

时间线不同

因为时间轴适用于类的实例，所以模拟应该以这种方式完成：

import { TimelineMax } from "gsap/TimelineMax";

同样，将两个文件添加到 mocks 目录中。 TweenLite 可以为空。

.
└── __mocks__
    └── gsap
        └── TweenLite.js 
        └── TimelineMax.js

module.exports = {
  TimelineMax: class {
    constructor(){
      this.to = jest.fn().mockReturnThis();
    }
  }
};

使用mockReturnThis() 可以链接方法。

【讨论】：