vuejs2 - Vue test utils 正在更新组件数据但不重新渲染 dom

Question

在发出更改组件数据的一个变量的 ajax 请求后，我正在尝试测试我的 Vue 应用程序的模板。此变量(书籍)用于有条件地渲染画廊

背景 :我想创建一个画廊来展示我存储在后端的书籍。为此，我拿了有关安装组件的书籍。其结果设置在变量 中。书籍 .我要测试的是，在 ajax 调用之后，组件会用书籍呈现画廊

问题 : 当设置了 books 变量时，div <div v-else-if='books.length > 0'>SHOW GALLERY</div>应该被渲染，但“else” div (<div v-else class='loader'>Loading</div>) 仍然被渲染

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

BookGallery.vue (我正在测试的组件)

 <template>
      <v-content>
          <v-container fluid>

               /*** Conditional rendering: After the ajax request books > 0, so this div should be rendered ***/
              <div v-if='books.length > 0'>SHOW GALLERY</div>

              <div v-else class='loader'>Loading</div>
          </v-container>
      </v-content>
    </template>

    <script lang='ts'>
      import {Component} from 'vue-property-decorator';
      import {MyMixin} from '../mixin';

      @Component({components: {BookInformation}})
      export default class BookGallery extends MyMixin {
          public books: string[] = [];

          public async mounted() {

               /*** books is set as the result of the ajax request ***/

               this.books = (await this.$http.get(this.host + '/books')).data;
          }
      }
    </script>

    <style scoped lang='scss'></style>

测试

    @test
    public async 'after calling the books, the gallery show all of them'() {

        /*** MOCKING THE RESPONSE ***/
        TestCase.OK_200({
            books: [
                { uri: 'img/covers/1.jpg', title: 'El Prinicipito'},
                { uri: 'img/covers/2.jpeg', title: 'The Lord of the Rings'},
            ],
        });


        /*** MOUNTING MY COMPONENT ***/
        const wrapper = TestCase.shallowMount(BookGallery);


        /** ASSERTING **/
        await flushPromises().then(() => {

            /**  the first "expect" passes, so books > 0 = true **/
            expect(wrapper.vm.$data.books).to.eqls({
                books: [
                    { uri: 'img/covers/1.jpg', title: 'El Prinicipito'},
                    { uri: 'img/covers/2.jpeg', title: 'The Lord of the Rings'},
                ],
            });

            /** This is failing. The application should read 'SHOW GALLERY' when books > 0 (something tested in the previous assert), as explained in the first comment of the component's template, but is not updating the dom, only the data **/
            see('SHOW GALLERY');
        });
    }

The QUIESTION: How can I update my DOM for my very last assert -see("SHOW GALLERY")-?

更新

见功能
该函数仅在 vue-test-utils 用于挂载应用程序的包装器中搜索 HTML 元素。在这种情况下，由于我将其保留为空，它正在整个 HTML 文件中搜索文本“SHOW GALLERY”

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

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

Answer 1

我刚刚解决了一个类似的问题，使用了 shallowMount 及其 sync: false选项。

这会停用同步渲染，要求您在需要时给渲染器一些时间来执行其工作 (await wrapper.vm.$nextTick())。
完成此操作后，组件将根据我的 react 数据重新渲染，正如预期的那样。