使用 Jest 在 Vue 上测试表单重置

Question

使用 Jest 测试用 Vue 构建的表单以进行单元测试。在这些元素中，我有一个重置按钮（type=reset），它工作正常，一旦点击它就会删除所有已经引入的值。

但是，在单元测试时，点击按钮似乎并没有清除值。我没有点击处理程序，只是使用表单的默认重置功能。

我也尝试过使用 wrapper.emmited('reset'); 无济于事，wrapper.emmitedByOrder(); returns 一个空数组。

如何测试重置按钮是否正确生成并按预期工作？

test('Assert Form Components', async () => {
 const wrapper = mount(FormElement, {
            propsData: {
                message: sampleJSON.formJSON
            }
        })

let resetBtn = wrapper.find('.form-reset');
let requiredInput = wrapper.find('.required-input');
....
requiredInput.setValue('test');
expect(requiredInput.element).toHaveValue('test'); //This passes

await resetBtn.trigger('click');
expect(requiredInput.element).not.toHaveValue('test') //This fails
....

Answer 1

显然缺少两件事。首先，正如@AlexMA 建议的那样，允许另一个滴答声让 DOM 稳定下来。其次，我需要将包装器附加到 DOM。最终代码如下所示：

test('Assert Form Components', async () => {
 const wrapper = mount(FormElement, {
            propsData: {
                message: sampleJSON.formJSON
            },
            attachTo: document.body
        })

let resetBtn = wrapper.find('.form-reset');
let requiredInput = wrapper.find('.required-input');
....
requiredInput.setValue('test');
expect(requiredInput.element).toHaveValue('test'); //This passes

await resetBtn.trigger('click');
await wrapper.vm.$nextTick()
expect(requiredInput.element).not.toHaveValue('test') //This works now!
....

使用 Jest 在 Vue 上测试表单重置

Testing form reset on Vue with Jest

javascript

vue.js

unit-testing

jestjs

vue-test-utils