错误无法在单元测试中使用 GSAP-TweenMax、Jest 和 VueJs 补间空目标

Question

尝试使用 Jest 对 VueJs 中的组件执行单元测试时出错，该组件具有使用TweenMax GSAP制作的动画。 错误是： 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)
  })

在我的项目目录中

在 mock 目录的 TweenMax.js 中

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

在测试目录

有些事情我不明白，或者我做得不好。 有什么困惑。

更新：这是我在组件中生成动画并在mounted中调用的方法

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方法。

请以这种方式更新您的模拟：

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

如果这能解决问题，请告诉我。