Mocking TimelineMax и TweenMax модули в Jest - PullRequest
Новая
       6

Mocking TimelineMax и TweenMax модули в Jest

0 голосов
/ 26 августа 2018

Я пытаюсь смоделировать свой импорт с анимацией, но я продолжаю получать 

● 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 />);
});

А вот и все издевательства, которые я пробовал безуспешно

Ответы [ 3 ]

0 голосов
/ 30 августа 2018

Вместо этого вы можете попробовать использовать версию UMD, например: 

import TweenLite from "gsap/umd/TweenLite"
0 голосов
/ 06 мая 2019

Опаздываю, но делюсь, потому что решение очень простое.(Я уже ответил здесь также)

Если вы прочитали документацию Jest , вы можете просто посмеяться над GSAP, создав файл в каталоге __mocks__.

Mocking 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.

Mocking 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() для возможности цепочки методов.

0 голосов
/ 26 августа 2018

, пожалуйста, обновите ваш jest config: 

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

и установите babel-jest.Кроме того, если ваша проблема не будет решена, то поделитесь своим шутливым конфигом, и мы обычно не высмеиваем импорт.

...