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

【问题标题】：Testing form reset on Vue with Jest使用 Jest 在 Vue 上重置测试表单
【发布时间】：2021-10-03 08:22:04
【问题描述】：

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

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

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

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

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

【问题讨论】：

您可能需要在await resetBtn.trigger('click'); 之后放置一个await wrapper.vm.$nextTick() 以让dom 稳定下来。
我在 codepen 上创建了一个 vue jest 模板，也许你可以尝试在那里重现问题，然后我可以尝试修复它。 codepen.io/AlgeoMA/pen/vYmdWVa
@AlexMA 您的等待下一个刻度的建议奏效了，谢谢！
这让很多开发人员都感到困惑。异步摘要循环的概念虽然对性能很有帮助，但有时会使单元测试 dom 操作有点痛苦。我很惊讶你必须附在文件上。请注意，当您这样做时，您必须手动销毁包装器，否则测试可能会将状态泄漏到其他测试中。

标签： javascript vue.js unit-testing jestjs vue-test-utils

【解决方案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!
....

【讨论】：