javascript - 在 Jest 中模拟 TimelineMax 和 TweenMax 模块

Question

我试图用动画来模拟我的导入，但我不断得到

● 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

错误来 self 的文件中的一个导入。

App.js

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

export default App;

在 ChronologyGraph 中我导入了我的组件 ProjectNode，它导入了我制作的另一个文件 animation.js，在我导入的 animation.js 中

import { TimelineMax, Power0 } from "gsap/TweenMax";
import { TweenMax } from "gsap/TweenMaxBase";

导致上述错误的原因，我想模拟这个 gsap 库或只是我的 animation.js

App.test.js

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

fit("renders without crashing", () => {
  jest.mock('../animation.js');
  jest.mock('gsap/TweenMaxBase');
  jest.mock('gsap/TweenMax');

  const wrapper = shallow(<App />);
});

这是我尝试过但没有成功的所有模拟

Answer 1

来晚了，但分享是因为解决方案非常简单。 (我也已经回答了here)

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

模拟 TweenMax

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

import { TweenMax } from "gsap/TweenMax";

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

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

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

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

模拟 TimelineMax

因为 TimelineMax 在类的实例上工作，所以 mock 应该以这种方式完成:

import { TimelineMax } from "gsap/TimelineMax";

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

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

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

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