5

例如，我有一个组件看起来像这样。

<template>
<div id="app">
  <button class="my-btn" @click="increment">{{ val }}</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      val: 1,
    };
  },
  methods: {
    increment() {
      fetch('httpstat.us/200').then((response) => {
        this.val++;
      }).catch((error) => {
        console.log(error);
      });
    },
  },
}
</script>

您还可以将此小提琴作为简化的演示进行检查

为了对这个组件进行单元测试，我写了这样的代码。

// Jest used here
test('should work', () => {
  // wrapper was generated by using avoriaz's mount API
  // `val` was 1 when mounted.
  expect(wrapper.data().val).toBe(1);
  // trigger click event for testing
  wrapper.find('.my-btn')[0].trigger('click');
  // `val` should be 2 when the button clicked.
  // But how can I force jest to wait until `val` was set?
  expect(wrapper.data().val).toBe(2);
});

expect自从run before完成后它就不起作用fetch了，但我不知道如何让 jest 等到 promise 函数完成。
那么如何在这个用例中进行测试呢？

更新我尝试了 nextTick 但没有运气。

 PASS  src/Sample.spec.js
  Sample.vue
    ✓ should work (31ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.46s
Ran all test suites.
  console.error node_modules/vue/dist/vue.runtime.common.js:477
    [Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected)

    Expected value to be (using ===):
      2
    Received:
      1"

  console.error node_modules/vue/dist/vue.runtime.common.js:564
    { Error: expect(received).toBe(expected)

    Expected value to be (using ===):
      2
    Received:
      1
        at /path/to/sample-project/src/Sample.spec.js:16:30
        at Array.<anonymous> (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:699:14)
        at nextTickHandler (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:646:16)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
      matcherResult: 
       { actual: 1,
         expected: 2,
         message: [Function],
         name: 'toBe',
         pass: false } }

这是完整的测试代码。

import { mount } from 'avoriaz';
import Sample from './Sample.vue';
import Vue from 'vue';

/* eslint-disable */

describe('Sample.vue', () => {

  test('should work', () => {
    const wrapper = mount(Sample);
    // console.log(wrapper.data().val);
    expect(wrapper.data().val).toBe(1);
    wrapper.find('.my-btn')[0].trigger('click');
    Vue.nextTick(() => {
        // console.log(wrapper.data().val);
        expect(wrapper.vm.val).toBe(2);
        done();
    })
  });

})

更新 2我添加了done，但它仍然无法正常工作。这是错误消息。 

  console.error node_modules/vue/dist/vue.runtime.common.js:477
    [Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected)

    Expected value to be (using ===):
      2
    Received:
      1"

  console.error node_modules/vue/dist/vue.runtime.common.js:564
    { Error: expect(received).toBe(expected)

    Expected value to be (using ===):
      2
    Received:
      1
        at /path/to/sample-project/src/Sample.spec.js:16:30
        at Array.<anonymous> (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:699:14)
        at nextTickHandler (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:646:16)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
      matcherResult: 
       { actual: 1,
         expected: 2,
         message: [Function],
         name: 'toBe',
         pass: false } }

 FAIL  src/Sample.spec.js (7.262s)
  ● Sample.vue › should work

    Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

      at pTimeout (node_modules/jest-jasmine2/build/queueRunner.js:53:21)
      at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:523:19)
      at ontimeout (timers.js:469:11)
      at tryOnTimeout (timers.js:304:5)
      at Timer.listOnTimeout (timers.js:264:5)

  Sample.vue
    ✕ should work (5032ms)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        8.416s
Ran all test suites.
4

2 回答 2

3

短篇小说：从flush-promises( npm i -D flush-promises) 获得帮助，然后await flushPromises()在您的Vue.nextTick.

更长的故事，我有一个EmailVerification.vue组件，其submit方法如下：

    submit () {
    this.successMessage = ''
    this.verifyError = null
    this.isVerifying = true

    this.verifyEmail({ 'key': this.key })
      .then(() => {
        this.isVerifying = false
        this.successMessage = 'Email verified, great! Thanks a lot. &nbsp; <i class="fa fa-home"></i><a href="/">Home</a>'
      })
      .catch((error) => {
        this.isVerifying = false
        this.verifyError = error
      })
  }

这是我通过的完整测试：

const localVue = createLocalVue()
localVue.use(Vuex)

const $route = {
  path: '/verify-email/:key',
  params: { key: 'dummy_key' },
  query: { email: 'dummy@test.com' }
}

describe('EmailVerification.vue', () => {
  describe('Methods', () => {
    let localAuth = { namespaced: true }
    let store
    let wrapper

    beforeEach(() => {
      localAuth.actions = {
        verifyEmail: jest.fn().mockReturnValueOnce()
      }

      store = new Vuex.Store({
        namespaced: true,
        modules: { auth: localAuth },
        strict: true
      })

      wrapper = shallowMount(EmailVerification, {
        localVue,
        store,
        stubs: {
          RouterLink: RouterLinkStub
        },
        mocks: {
          $route
        }
      })
    })

    it('should trigger verifyEmail when button is clicked', async (done) => {
      const data = { key: 'another_dummy_key' }
      wrapper.setData(data)
      const button = wrapper.find('button')

      expect(wrapper.vm.isVerifying).toBeFalsy()
      expect(wrapper.vm.verifyError).toBeNull()
      expect(button.attributes().disabled).toBeUndefined()

      button.trigger('click')

      expect(localAuth.actions.verifyEmail).toHaveBeenCalled()
      expect(localAuth.actions.verifyEmail.mock.calls[0][1]).toEqual(data)

      expect(button.attributes().disabled).toBeDefined()
      expect(wrapper.vm.isVerifying).toBeTruthy()
      expect(wrapper.vm.verifyError).toBeNull()

      const inputArray = wrapper.findAll('input')
      expect(inputArray.at(0).attributes().disabled).toBeDefined()
      expect(inputArray.at(1).attributes().disabled).toBeDefined()

      await flushPromises()

      wrapper.vm.$nextTick(() => {
        expect(wrapper.vm.isVerifying).toBeFalsy()
        expect(wrapper.vm.verifyError).toBeNull()
        done()
      })
    })
  })
})

然后使用jest.fn()mock函数的返回值来返回并测试一个错误。

注意：我使用的是 jest 和 mocha，而不是 avoriaz。

于 2019-03-12T21:43:15.713 回答
1

您需要在测试中使用Vue.nextTickand done：

test('should work', (done) => {
  expect(wrapper.data().val).toBe(1);
  wrapper.find('.my-btn')[0].trigger('click');
    Vue.nextTick(() => {
        expect(wrapper.vm.val).toBe(3);
        done()
    })
});
于 2017-08-10T11:18:16.723 回答