Vue Jest Unit Test - PullRequest
Новая
       3

Vue Jest Unit Test

0 голосов
/ 21 апреля 2020

У меня есть компонент, как показано ниже: 

<template>
   <h1>{{ numberOfRecords }}</h1>
   <button @click="callMe">Update</Button>
</template>

<script>
import MyService from '../services/MyService'
export default {
  name: 'MyComponent',

  data() {
    return {
      numberOfRecords: 0,
    }
  },

  methods: {
    async callMe() {
        try {
          console.log('calling post')
          const myResponse = await MyService.postSomething(this.data)
          this.numberOfRecords = bulkUpdateResponse.data.numberOfRecords
        } catch (error) {
          const message = error.response ? error.response.data : error
          console.log(message)
        }
      }
    },
  },
}
</script>

<style>

</style>

MyService.js похож на: 

import AxiosService from './AxiosService'

const resourceUrl = 'rest/myrestpath'

export default {
  postSomething(data) {
    return AxiosService.post(`${resourceUrl}/somepath`, data)
  },
}

Наконец, AxiosService - это то, где axios сообщение происходит.

Я хочу написать модульный тест для MyComponent, где я хочу смоделировать MyService.postSomething, чтобы вернуть ложные данные и избежать вызова ios.

Мой MyComponent.spec.js выглядит так: 

import { mount } from '@vue/test-utils'
import MyComponent from '../../src/views/MyComponent.vue'
import MyService from '../../src/services/MyService.js'

jest.mock('../../src/services/MyService')

describe('MyComponent.vue', () => {
    beforeEach(() => {
      // Clear all instances and calls to constructor and all methods
      MyService.postSomething.mockClear()
    })

it('We get a success', () => {
    const resp = { data: { numberOfRecords: '10' } }
    MyService.postSomething.mockImplementation(() => resp)

    const wrapper = mount(MyComponent)

    wrapper.find('button').trigger('click')
    expect(wrapper.vm.$data.numberOfRecords).toBe(10)  // why not updated ?

    wrapper.vm.$nextTick().then(() => {
      expect(wrapper.vm.$data.numberOfRecords).toBe(10)  // still not updating. getting error.
    }
   })
  })
})

При запуске этого теста, я ожидаю, что numberOfRecords будет обновлено до 10 согласно моему макету json. Однако этого не происходит там, где мое первое expect утверждение.

Затем я подумал, что нужно поместить его в $nextTick(), однако оно все равно не работает. Я получаю сообщение об ошибке: 

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:15964) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Я новичок в Vue и Jest. Мне трудно понять, что здесь происходит и как это исправить.

1 Ответ

0 голосов
/ 21 апреля 2020

Ожидается, что данные не будут обновляться сразу после trigger('click'), для этого $nextTick. Кроме того, он не должен быть числом 10, потому что для него установлена ​​строка «10». expect предоставит полезную обратную связь по этому вопросу, если в результате неудачного теста будет получен правильный вывод ошибки.

UnhandledPromiseRejectionWarning появляется из-за необработанного отклонения обещания, которое не приводит к сбою теста. then(...) обещание не было приковано к возврату отклоненного обещания из тестовой функции. Самый простой способ не оставлять его свободным - это синтаксис async..await: 

it('We get a success', async () => {
    ...
    wrapper.find('button').trigger('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.vm.$data.numberOfRecords).toBe('10')
})

Если предполагается, что numberOfRecords - это число и используется для математических операций, его следует принудительно задавать как число. в ответе JSON или в месте его обработки: 

this.numberOfRecords = +bulkUpdateResponse.data.numberOfRecords
...