嘲笑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

错误来自我文件中的导入文件之一。

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

请更新您的玩笑配置：

"transform": {
  "\\.js$": "<rootDir>/node_modules/babel-jest"
}

并安装babel-jest。此外，如果您的问题无法解决，请共享您的笑话配置，我们通常不会模拟导入。

Answer 2

您可以改用UMD版本，例如：

import TweenLite from "gsap/umd/TweenLite"

Answer 3

这个问题来得很晚，但是可以共享，因为解决方案非常简单。（我也已经回答了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可用于类的实例，因此应通过以下方式进行模拟：

import { TimelineMax } from "gsap/TimelineMax";

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

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

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

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

在Jest中模拟TimelineMax和TweenMax模块

3 个答案:

嘲笑TweenMax

模拟TimelineMax