Vuejs2 Vue test utils正在更新组件数据，但不会重新呈现dom

在发出ajax请求后，我正在尝试测试Vue应用程序的模板，该请求正在更改组件数据的一个变量。此变量（books）用于有条件渲染库

上下文：我想创建一个图库，以显示我在后端存储的书籍。为此，我取了关于安装组件的书籍。其结果在变量books中设置。我要测试的是，在ajax调用之后，组件将用书籍呈现图库

问题：设置books变量时，应该呈现div

SHOW GALLERY

，但“else”div（

加载

）仍然呈现

接下来的两个代码块是组件和测试本身：

BookGallery.vue（我正在测试的组件）

静止状态：如何为最后一次断言更新DOM-

请参见（“显示库”）

-

更新

参见功能 该函数仅在vue test utils用于装载应用程序的包装中搜索HTML元素。在本例中，由于我将其保留为空，它正在整个HTML文件中搜索文本“ShowGallery”

export const see = (text: string, selector?: string) => {
    const wrap = selector ? wrapper.find(selector) : wrapper;

    expect(wrap.html()).contains(text);
};

---

我刚刚解决了一个类似的问题，使用shallowMount及其

sync:false

选项

这将停用同步渲染，要求您在需要时给渲染器一些时间来执行其作业（

wait wrapper.vm.$nextTick（）

）。

---

完成此操作后，根据我的反应数据重新呈现组件，正如预期的那样。

我遇到了非常类似的问题，并使用

await wrapper.vm.$forceUpdate（）解决了它。这将强制Vue更新视图
 最初，Vue测试util同步运行更新。但后来他们取消了同步模式。它们解释了原因并说明了如何编写测试：

测试代码将从此处更改：

it('render text', (done) => {
    const wrapper = mount(TestComponent)
    wrapper.trigger('click')
    wrapper.text().toContain('some text')
})

为此：

it('render text', async () => {
    const wrapper = mount(TestComponent)
    wrapper.trigger('click')
    await Vue.nextTick()
    wrapper.text().toContain('some text')
})

因此，要解决您的问题，您需要在断言之前添加
wait wrapper.vm.$nextTick（）
，参见（'SHOW GALLERY'）
我遇到了一个类似的问题，即子组件标记未在装载时呈现，根据其他答案，以下内容对我有效：

test（'it work as expected'，async（）=>{
常量包装器=等待装载（TestComponent）；
//期望（…）
});
您是否尝试了
wrapper.update（）
？是的，我尝试了强制更新，但我感觉它只会再次更新数据，不知道如何更新渲染函数
请参阅
函数在做什么？这是在这里没有提到的库中断言某些内容的常用方法吗？对不起，你是对的。我将编辑帖子。我遇到了非常类似的问题，只是用
mount
而不是
shallowMount
解决了它。试试看。另一个潜在的问题：
@Component（{components:{BookInformation}}}）
在BookGallery.vue中-您没有在任何地方使用
BookInformation
。这对我也不起作用，上面的答案可以确保您使用的是
wait wrapper.vm.$forceUpdate（）异步
，或者使用
$nextTick（）
更传统的承诺语法：
wrapper.vm.$nextTick（）。然后（（）=>{/*你的代码在这里*/}
await wrapper.vm.$nextTick（）在没有将sync设置为false的情况下为我工作。这是否在doc中的某个地方提到过？@XiaoPeng-ZenUML.com我不知道该文档，但这里有解释：
it('render text', (done) => {
    const wrapper = mount(TestComponent)
    wrapper.trigger('click')
    wrapper.text().toContain('some text')
})

it('render text', async () => {
    const wrapper = mount(TestComponent)
    wrapper.trigger('click')
    await Vue.nextTick()
    wrapper.text().toContain('some text')
})