错误无法在使用GSAP-TweenMax，Jest和VueJs进行单元测试时补间空目标

Question

[尝试在具有TweenMax GSAP动画的VueJs组件上使用Jest执行单元测试时出现错误。错误是：Cannot tween a null target.

在ztButton.spec.js中

jest.mock('gsap/TweenMax')

it('Component must to emit event on click', () => {
    const wrapper = shallowMount(ztButton)
    const spy = sinon.spy()
    wrapper.setMethods({ clickButton: spy })
    wrapper.find('.zt-button').trigger('click')
    expect(spy.called).toBe(true)
  })

在我的项目目录中

在模拟目录的TweenMax.js中

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

在测试目录中

有些事情我不了解，或者我做得不好。有点困惑。

更新：这是我在组件中生成动画并在mount中调用的操作

mounted() {
    this.componentId = this._uid
    this._addButtonRipple()
  },
methods: {
    _addButtonRipple() {
      const $button = this.$refs.button
      $button.addEventListener('click', event => {
        const rect = $button.getBoundingClientRect(),
          x = event.clientX - rect.left,
          y = event.clientY - rect.top
        let $ripple = $button.querySelector('.zt-button-ripple')
        TweenMax.set($ripple, {
          x: x,
          y: y,
          scaleX: 0,
          scaleY: 0,
          opacity: 1
        })
        TweenMax.to($ripple, 1.5, {
          scaleX: 1,
          scaleY: 1,
          opacity: 0,
          ease: Expo.easeOut
        })
      })
    },
    clickButton(event) {
      this.$emit('click', event)
      this.isRipple = true
      setTimeout(() => {
        this.isRipple = false
      }, 300)
    }
}

以计算方式

computed: {
    listeners() {
      return {
        ...this.$listeners,
        click: event => this.clickButton(event)
      }
    }

使用html标签

<button v-on="listeners"></button>

这是我的文件jest.config.js的配置

module.exports = {
  verbose: true,
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: ['/node_modules/'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^src/(.*)$': '<rootDir>/src/$1',
    '^src/component/(.*)$': '<rootDir>/src/components/atomic/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/components/atomic/**/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
}

Answer 1

Cannot tween a null target表示不模拟TweenMax方法。实际上，您只是在嘲笑TweenMax.to方法。