🍟 jest 에서 setTimeOut,setInterVal을 사용하기

🥗 setTimeOut

개발을 하는 도중 setTimeOut을 만나게 되었고,이것을 어떻게 테스트 할 것인가에 대한 고민이 있었다.

jest 문서를 보는 도중 jest.useFakeTimers 를 발견하였다.

 

아래는 vue 소스이다.

5초후 count값이 1이되었는지 확인이 필요하다.

<template>
  <div>
    <p id="count">{{ count }}</p>
  </div>
</template>
<script>
  export default {
    name: 'TimeOut',

    data() {
      return {
        count: 0,
      }
    },
    created() {
      setTimeout(() => {
        this.count++
      }, 5000)

    },
    mounted() {},

    methods: {},
    destroyed() {
    }
  }
</script>
<style scoped></style>

 

아래는 테스트 코드이다.

jest.useFakeTimers 를 통해 timer함수를 다 mock으로 바꿔준다.

jest.advanceTimersByTime(n) 를 통해 n 초 후 빨리감기로 이동한다.

afterEach에서 jest.clearAllTimers를 통해 clear 한다

import { shallowMount } from '@vue/test-utils'
import timeOut from '@/views/mainLayout/timeOut.vue'

describe('timeOut Testing', () => {
  let wrapper = null

  //jest.useFakeTimers()
  beforeEach(() => {
    wrapper = shallowMount(timeOut)
  })

  afterEach(() => {
    jest.clearAllTimers()
  })

  test('5초 후 화면에서 count값이 2로 된다', async () => {
    const count = wrapper.findComponent('#count')
    jest.advanceTimersByTime(5000)
    await wrapper.vm.$nextTick()
    expect(parseInt(count.text())).toBe(1)
  })

})

 

🌯 setInterval

setTimeOut과 마찬가지로 interval도 같은 방식으로 처리 할 수 있다.

 

<template>
  <div>
    <p id="intervalCount">{{ intervalCount }}</p>
  </div>
</template>
<script>
export default {
  name: 'TimeOut',

  data() {
    return {
      intervalCount: 0,
      intervalId: -1
    }
  },
  created() {

    this.intervalId = setInterval(() => {
      this.intervalCount++
    }, 1000)
  },
  mounted() {},

  methods: {},
  destroyed() {
    clearInterval(this.intervalId)
  }
}
</script>
<style scoped></style>

테스트 코드

import { shallowMount } from '@vue/test-utils'
import timeOut from '@/views/mainLayout/timeOut.vue'

describe('timeOut Testing', () => {
  let wrapper = null

  //jest.useFakeTimers()
  beforeEach(() => {
    wrapper = shallowMount(timeOut)
  })

  afterEach(() => {
    jest.clearAllTimers()
  })


  test('1초마다 intervalCount를 증가시킨다', async () => {
    const count = wrapper.findComponent('#intervalCount')
    jest.advanceTimersByTime(1000)
    await wrapper.vm.$nextTick()
    expect(parseInt(count.text())).toBe(1)
  })
})