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

Posted 2023-02-22

【中文标题】在 vuejs + laravel 中使用 jest 进行单元测试

【英文标题】：Using jest for unit test in vuejs + laravel

【发布时间】：2018-03-04 15:57:20

【问题描述】：

在我的 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);
            
        

【参考方案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);