gpt4 book ai didi

unit-testing - 测试异步返回的数据

转载 作者:搜寻专家 更新时间:2023-10-30 22:13:36 25 4
gpt4 key购买 nike

我有以下示例:

<!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 输出中。但是,断言消息并不像正常测试中那样清晰。此外,这项技术在我看来仍然很困惑。

最佳答案

由于 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 .

关于unit-testing - 测试异步返回的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40504000/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com