0

我有一个带有海峡向前编辑按钮的组件。编辑按钮调用设置isEditing为的方法true。

有一些输入元素带有v-if="isEditing"，所以我正在测试这些输入元素在单击“编辑”按钮后是否可见。

当我的测试运行fireEvent.click(screen.getByRole('link', {name: 'Edit'}))时，它会更新isEditing为 true （基于.click事件之前/之后的我的 console.log 消息），但它似乎没有重新渲染测试中的组件（基于之后在我的终端中呈现的 DOM getByRole 失败）。

它在浏览器中按预期工作，但似乎没有更新规范的 DOM。我正在使用 Vue2、Vue 测试库和 Jest。

执行：

<template>
  <a @click.prevent="startEdit" v-if="!isEditing">Edit</a>
  <input :v-if="isEditing" />
</template>
...
methods: {
  startEdit: () => {
    this.isEditing = true
  }
}

规格：

describe('FormComponent', () => {
  beforeEach(() => {
    render(FormComponent)
  })

  it('displays input tags' () => {
    fireEvent.click(screen.getByRole('link', {name: 'Edit'}))
    expect(screen.getByRole('input')).toBeInTheDocument()
  })

})
4

2 回答 2

1

问题是您的期望在 DOM 有机会更新之前运行。从 测试库文档中：

因为 Vue 在重新渲染期间异步应用 DOM 更新，所以 fireEvent 工具被重新导出为异步函数。为确保 DOM 正确更新以响应测试中的事件，建议始终等待 fireEvent。

您应该更新您的测试以等待 fireEvent 承诺，如下所示：

it('displays input tags' async () => {
    await fireEvent.click(screen.getByRole('link', {name: 'Edit'}))
    expect(screen.getByRole('input')).toBeInTheDocument()
})

正如妮可在她的回答中指出的那样，您的第二个 v-if 也有一个错字。

于 2021-11-18T15:26:48.527 回答
0

它不起作用，因为您:v-if在应该写的时候写了v-if。我想这只是一个错字，因为你第一次做对了（v-if="!isEditing"）

于 2021-11-18T11:21:23.080 回答