摩卡-webpack- dom没有更新

Question

我用的是Vue和Webpack4。我安装了mocha-webpack进行测试。但我从摩卡那里得到了一个失败的结果。我认为count正在更新，所以我想通过测试。但失败了。为什么我会得到这样的结果？也许，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;

Counter.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');
  });
});

package.json

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

Answer 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();
    });
  });
});

异步更新队列。

测试异步行为。