Vue.js - 测试异步返回的数据答案

【问题标题】：Vue.js - Testing asynchronously returned dataVue.js - 测试异步返回的数据
【发布时间】：2017-03-23 02:06:48
【问题描述】：

我有以下例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.1.2/mocha.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js"></script>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>

    <script>mocha.setup('bdd');</script>
    <script>
     "use strict";
     var assert = chai.assert;
     var should = chai.should();

     var vm = new Vue({
     data: {
         message: "Hello"
     },

     methods: {
         loadMessage: function() {
         this.$http.get("/get").then(
             function(value) {
             this.message = value.body.message;
             });
         },
     }
     });
     describe('getMessage', function() {
     let server;
     beforeEach(function () {
         server = sinon.fakeServer.create();
     });

     it("should get the message", function(done) {
         server.respondWith([200, { 'Content-Type': 'application/json' },
                 JSON.stringify({message: "Test"})]);

         vm.message.should.equal("Hello");
         vm.loadMessage();
         server.respond();
         setTimeout(function() {
         // This one works, but it's quirky and a possible error is not well represented in the HTML output.
         vm.message.should.equal("Test");
         done();
         }, 100);

         // This one doesn't work
         //vm.message.should.equal("Test");
     });
     });
    </script>
    <script>
      mocha.run();
    </script>
  </body>
</html>

我想测试一下 Vue 异步从服务器获取数据。不过，我用 Sinon FakeServer 模拟了实际的 http 请求。

当然，直接在调用loadMessage 之后，消息尚未设置。我可以使用超时功能进行测试，但我相信应该有更好的方法。我查看了respondImmediately，但没有改变。此外，还可以调用 done() 函数。但是，据我了解，这需要在 loadMessage 函数中调用，因此需要修改被测代码。

处理这个问题的正确方法是什么？

编辑：我至少找到了部分解决方案，但似乎仍然很混乱：在 mocha 单元测试中调用 done() 函数。当断言失败时，它至少会显示在 html 输出中。但是，断言消息不像正常测试那样清晰。此外，这项技术对我来说似乎仍然很混乱。

【问题讨论】：

如果你没有得到更好的答案，你应该看看拦截器：github.com/pagekit/vue-resource/blob/master/docs/…
loadMessage 返回什么？
loadMessage 不返回任何内容，并在视图模型中定义。它从服务器异步加载数据，并在收到消息后更新模型。

标签： unit-testing mocha.js vue.js vue-resource

【解决方案1】：

由于 vue 组件的更新是异步完成的，因此您需要使用

// Inspect the generated HTML after a state update
  it('updates the rendered message when vm.message updates', done => {
    const vm = new Vue(MyComponent).$mount()
    vm.message = 'foo'
    // wait a "tick" after state change before asserting DOM updates
    Vue.nextTick(() => {
      expect(vm.$el.textContent).toBe('foo')
      done()
    })
  })

取自official docs。

【讨论】：