Как протестировать асинхронный метод в компоненте Vuejs при использовании jest и avoriaz
Например, у меня компонент выглядит следующим образом.
<template>
<div id="app">
<button class="my-btn" @click="increment">{{ val }}</button>
</div>
</template>
<script>
export default {
data() {
return {
val: 1,
};
},
methods: {
increment() {
fetch('httpstat.us/200').then((response) => {
this.val++;
}).catch((error) => {
console.log(error);
});
},
},
}
</script>
Вы также можете проверить эту скрипку как упрощенную демонстрацию
Чтобы выполнить модульное тестирование этого компонента, я написал такой код.
// Jest used here
test('should work', () => {
// wrapper was generated by using avoriaz's mount API
// `val` was 1 when mounted.
expect(wrapper.data().val).toBe(1);
// trigger click event for testing
wrapper.find('.my-btn')[0].trigger('click');
// `val` should be 2 when the button clicked.
// But how can I force jest to wait until `val` was set?
expect(wrapper.data().val).toBe(2);
});
С тех пор это не сработало expect побежал раньше fetchсделано, но я понятия не имею, как дать шуту подождать, пока не будет выполнено обещание.
Итак, как я могу проверить в этом случае использования?
Обновление Я попробовал nextTick, но не получилось.
PASS src/Sample.spec.js
Sample.vue
✓ should work (31ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.46s
Ran all test suites.
console.error node_modules/vue/dist/vue.runtime.common.js:477
[Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected)
Expected value to be (using ===):
2
Received:
1"
console.error node_modules/vue/dist/vue.runtime.common.js:564
{ Error: expect(received).toBe(expected)
Expected value to be (using ===):
2
Received:
1
at /path/to/sample-project/src/Sample.spec.js:16:30
at Array.<anonymous> (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:699:14)
at nextTickHandler (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:646:16)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
matcherResult:
{ actual: 1,
expected: 2,
message: [Function],
name: 'toBe',
pass: false } }
Вот полный тестовый код.
import { mount } from 'avoriaz';
import Sample from './Sample.vue';
import Vue from 'vue';
/* eslint-disable */
describe('Sample.vue', () => {
test('should work', () => {
const wrapper = mount(Sample);
// console.log(wrapper.data().val);
expect(wrapper.data().val).toBe(1);
wrapper.find('.my-btn')[0].trigger('click');
Vue.nextTick(() => {
// console.log(wrapper.data().val);
expect(wrapper.vm.val).toBe(2);
done();
})
});
})
Обновление 2 я добавил done, но это все еще не работает. Вот сообщение об ошибке.
console.error node_modules/vue/dist/vue.runtime.common.js:477
[Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected)
Expected value to be (using ===):
2
Received:
1"
console.error node_modules/vue/dist/vue.runtime.common.js:564
{ Error: expect(received).toBe(expected)
Expected value to be (using ===):
2
Received:
1
at /path/to/sample-project/src/Sample.spec.js:16:30
at Array.<anonymous> (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:699:14)
at nextTickHandler (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:646:16)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
matcherResult:
{ actual: 1,
expected: 2,
message: [Function],
name: 'toBe',
pass: false } }
FAIL src/Sample.spec.js (7.262s)
● Sample.vue › should work
Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
at pTimeout (node_modules/jest-jasmine2/build/queueRunner.js:53:21)
at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:523:19)
at ontimeout (timers.js:469:11)
at tryOnTimeout (timers.js:304:5)
at Timer.listOnTimeout (timers.js:264:5)
Sample.vue
✕ should work (5032ms)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 8.416s
Ran all test suites.
1 ответ
Короткая история: получить помощь от flush-promises (npm i -D flush-promises) и позвоните await flushPromises() как раз перед вашим Vue.nextTick,
Более длинная история, у меня есть EmailVerification.vue компонент с submit метод как это:
submit () {
this.successMessage = ''
this.verifyError = null
this.isVerifying = true
this.verifyEmail({ 'key': this.key })
.then(() => {
this.isVerifying = false
this.successMessage = 'Email verified, great! Thanks a lot. <i class="fa fa-home"></i><a href="/">Home</a>'
})
.catch((error) => {
this.isVerifying = false
this.verifyError = error
})
}
Вот мой полный прохождение теста:
const localVue = createLocalVue()
localVue.use(Vuex)
const $route = {
path: '/verify-email/:key',
params: { key: 'dummy_key' },
query: { email: 'dummy@test.com' }
}
describe('EmailVerification.vue', () => {
describe('Methods', () => {
let localAuth = { namespaced: true }
let store
let wrapper
beforeEach(() => {
localAuth.actions = {
verifyEmail: jest.fn().mockReturnValueOnce()
}
store = new Vuex.Store({
namespaced: true,
modules: { auth: localAuth },
strict: true
})
wrapper = shallowMount(EmailVerification, {
localVue,
store,
stubs: {
RouterLink: RouterLinkStub
},
mocks: {
$route
}
})
})
it('should trigger verifyEmail when button is clicked', async (done) => {
const data = { key: 'another_dummy_key' }
wrapper.setData(data)
const button = wrapper.find('button')
expect(wrapper.vm.isVerifying).toBeFalsy()
expect(wrapper.vm.verifyError).toBeNull()
expect(button.attributes().disabled).toBeUndefined()
button.trigger('click')
expect(localAuth.actions.verifyEmail).toHaveBeenCalled()
expect(localAuth.actions.verifyEmail.mock.calls[0][1]).toEqual(data)
expect(button.attributes().disabled).toBeDefined()
expect(wrapper.vm.isVerifying).toBeTruthy()
expect(wrapper.vm.verifyError).toBeNull()
const inputArray = wrapper.findAll('input')
expect(inputArray.at(0).attributes().disabled).toBeDefined()
expect(inputArray.at(1).attributes().disabled).toBeDefined()
await flushPromises()
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.isVerifying).toBeFalsy()
expect(wrapper.vm.verifyError).toBeNull()
done()
})
})
})
})
Затем поиграйте с возвращаемым значением jest.fn() фиктивная функция для возврата и проверки ошибки.
Примечание: я использую шутки и мокко, а не авориаз.
Вам нужно использовать Vue.nextTick а также done внутри теста:
test('should work', (done) => {
expect(wrapper.data().val).toBe(1);
wrapper.find('.my-btn')[0].trigger('click');
Vue.nextTick(() => {
expect(wrapper.vm.val).toBe(3);
done()
})
});