Question

在我的vue js组件中，我有这个

<template>
    <div class="timing_fund_redirect">Your fund will drop in {{ timer }} seconds.</div>
</template>

如何在Jest

中对该部件进行单元测试

假设我有

methods: {
            fundTimer() {
                var countdown = 10;

                window.setInterval(function() {
                    (countdown < 1) ? window.location = _this.path : _this.timer = countdown;
                    countdown--;
                },1000);
            }
        }

Answer 1

一般来说，如果您想使用Jest测试基于时间的JavaScript，可以使用timer mocks。如果您想测试您正确设置“计时器”数据属性，那么测试相对容易：

import Timer from './Timer.vue'
import Vue from 'vue'

jest.useFakeTimers();

describe('it works', () => {
   it('sets the timer property correctly', () => {
      jest.runTimersToTime(3000);
      // remember to call this in a nextTick callback so your component has a change to update properly
      Vue.nextTick(() => {
        // you don't do your first reduction of the property until one second is elapsed, so after 3 seconds, timer will equal 8
        expect(Timer.data().timer).toBe(8) 
      }) 
   }
});

至于测试您的重定向是否有效，您可以使用runTimersToTime将计时器运行到超过10秒阈值的数字。模拟window.location对象本身有点棘手，但我通常喜欢将URL重定向抽象到一个单独的模块中，所以你可以这样做，然后监视重定向方法以确保它被调用。

我假设您正在使用_this，因此您可以在setTimeout回调范围内访问您的Vue组件，但我看不到您在哪里设置它。您可以使用箭头函数来访问该回调中的组件数据属性。

此外，您并不真正需要本地countdown变量，您可以直接修改timer属性。

data () {
  return {
    timer: 10
  }
},
methods: {
  fundTimer() {
     window.setInterval(() => {
        (this.timer < 1) ? window.location = this.path : this.timer--;
     },1000);
  }
}

在vuejs + laravel中使用jest进行单元测试

1 个答案: