0

我正在使用带有 Webpack4 的 Vue。我被安装mocha-webpack进行测试。但我从摩卡得到了失败的结果。我认为 tocount正在更新，所以我认为要通过测试。但是失败了。为什么我会得到这样的结果？也许，VirtualDom 在运行测试时没有更新。 increment方法在测试中被调用，但没有更新 dom。

测试结果。

 MOCHA  Testing...



  Counter.vue
    1) increments count when button is clicked


  0 passing (26ms)
  1 failing

  1) Counter.vue
       increments count when button is clicked:
     Error: expect(received).toMatch(expected)

Expected substring: "1"
Received string:    "0"
      at Context.it (/path/to/project/static/bundles/main-92a73207cfb074150def.js:7:220294)



 MOCHA  Tests completed with 1 failure(s)

setup.js

require('jsdom-global')();

global.expect = require('expect');

window.Date = Date;

计数器.vue

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="increment()">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },

  methods: {
    increment() {
      this.count++;
    }
  },
}
</script>

Counter.spec.js

import { shallowMount } from '@vue/test-utils'
import Counter from './Counter.vue'

describe('Counter.vue', () => {
  it('increments count when button is clicked', () => {
    const wrapper = shallowMount(Counter);
    wrapper.find('button').trigger('click');
    expect(wrapper.find('div span').text()).toMatch('1');
  });
});

包.json

    "jsdom": "^15.1.1",
    "jsdom-global": "^3.0.2",
    "mocha": "^6.2.0",
    "mocha-webpack": "^2.0.0-beta.0",
4

1 回答 1

1

问题是当您更改count实际 DOM 时，此时并未更新。所以你应该等到 Vue 操作 DOM，因为 Vue 异步执行 DOM 操作。

例如，当您设置 时vm.someData = 'new value'，组件不会立即重新渲染。当队列被刷新时，它将在下一个“滴答”中更新。大多数时候我们不需要关心这个，但是当你想做一些依赖于更新后 DOM 状态的事情时，它可能会很棘手。

来自vue-test-utilds文档的代码示例：

it('fetches async when a button is clicked', done => {
  const wrapper = shallowMount(Foo)
  wrapper.find('button').trigger('click')
  wrapper.vm.$nextTick(() => {
    expect(wrapper.vm.value).toBe('value')
    done()
  })
})

我没有使用过，mocha但我认为您的代码应该如下所示：

describe('Counter.vue', done => {
  it('increments count when button is clicked', () => {
    const wrapper = shallowMount(Counter);
    wrapper.find('button').trigger('click');
    wrapper.vm.$nextTick(() => {
      expect(wrapper.find('div span').text()).toMatch('1');
      done();
    });
  });
});

异步更新队列。

测试异步行为。

于 2019-08-02T19:42:19.610 回答