Vuejs测试实用程序与Jest - stuck测试异步服务
Vuejs测试实用程序与Jest - stuck测试异步服务
提问于 2018-10-31 23:12:42
我有一个服务，GetStatsService，它包含一个异步方法，它调用几个api端点，然后处理数据，返回一个对象。它看起来像这样：
export default() {
async getMonthlyStats (userId) {
const calls = [axios.get(...), axios.get(...)]
const [stats, results, user] = await Promise.all(calls)
const combinedStats = {}
...
...
return combinedStats
}
}然后，在一个名为UserComparison.vue的组件中调用getMontlyStats方法，其中为表示用户id的每个路由查询参数多次调用该方法。UserComparison组件还有一个名为stats的data属性，它是一个数组，每个玩家的服务调用结果都会被推送到该属性中：
async fetch() {
let calls = []
this.$route.query.user.forEach((id) => {
calls.push(this.fetchUserStats(id)
}
try {
await Promise.all(calls)
} catch (err) {
console.log(err)
}
}
async fetchUserStats(id){
const call = await GetStatsService.getMonthlyStats(id)
this.stats.push(call)
}最后，this.stats数据属性作为属性传递给子组件StatsTable.vue。
我的问题:我想要对服务进行单元测试，但无法以我能想到的任何方式做到这一点。我尝试为子组件创建一个测试。在beforeEach()方法中，我用moxios模拟了api调用。
beforeEach(() => {
moxios.install(axios)
moxios.stubRequest(new RegExp(`${base_api}/users/.*/stats`), {
status: 200,
response: SampleStats
})
moxios.stubRequest(new RegExp(`${base_api}/users/.*/history`), {
status: 200,
response: SampleHistory
})
const userIds = [ '123', '456', '789']
const stats = []
userIds.forEach(async (id) => {
stats.push(await GetStatsService.getMonthlyStats(id))
}
wrapper = mount(StatsTable, {
localVue,
propsData: {
stats
},
mocks: {
$t: (t) => { return t }
},
attachToDocument: true
})})
我尝试使用vm.$nextTick()等待异步服务返回值，然后将其推送到stats常量。我尝试使用flush-promises解析所有promises，然后将异步调用结果推送到stats数组。似乎什么都不起作用。stats prop始终是一个空数组。我知道在Vue中测试异步性可能会很棘手，所以我假设我没有完全理解一些东西。
回答 1
Stack Overflow用户
发布于 2019-07-04 06:26:18
我仍然有上面描述的问题，但我确实发现，如果您将处理promises的风格从async/ await更改为标准<promise>.then()，我就能够使测试通过。
下面是一个带有示例测试的示例组件：
<ul>
<li
v-for="notification in notifications"
:key="notification.id"
>
{{notification.body}}
</li>
</ul>
</template>
<script>
import axios from 'axios';
export default {
data(){
return {
notifications: []
}
},
methods:{
getNotifications(){
axios.get('/notifications.json')
.then(response => this.notifications = response.data.data)
}
},
mounted(){
this.getNotifications();
}
}
</script>import AppNotifications from '../AppNotifications';
jest.mock('axios', () => {
return {
get: () => Promise.resolve({
data: {
"data": [{
"id": 1,
"body": "first notification",
"read": "true"
},
{
"id": 2,
"body": "second notification",
"read": "false"
}
]
}
})
}
})
describe('AppNotification', () => {
it('renders a list of notifications', async() => {
let wrapper = mount(AppNotifications)
await wrapper.vm.$nextTick(() => {
let items = wrapper.findAll('li');
expect(items.at(0).text()).toContain('first notification')
expect(items.at(1).text()).toContain('second notification')
});
});
})```页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53086639
复制相关文章
相似问题
腾讯云开发者
