Vue笑话单元测试

Question

我的组件如下：

<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以返回模拟数据并避免axios调用。

我的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.
    }
   })
  })
})

[运行此测试时，我希望根据我的模拟json将numberOfRecords更新为10。但是，在我的第一个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的新手。我很难理解这里出了什么问题以及如何解决。

Answer 1

预计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