渲染 Vue 测试 setData 对象属性时出现 TypeError

Question

我运行陷入了一个奇怪的境地，不知道为什么。基本上在我的 HTML 中，如果我呈现 'actor[0]'，测试运行正常并且控制台日志显示 setData

中存在的整个 'actor' 对象

但是，如果我尝试访问 'actor' 对象的属性，比如 actor[0].firstname，测试会抛出 TypeError-can't-read-属性-未定义的。

奇怪的部分是控制台日志记录 'wrapper.vm.actor[0].firstname' 工作正常所以它看起来不像是异步问题。

myapps.spec.js

import { mount } from "@vue/test-utils";
import MyApps from "@/pages/myapps.vue";
import Vuetify from "vuetify";

describe("Testing Myapps", () => {
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify();
  });
  it("Checks SideBarComponent is rendered", async () => {
    const wrapper = mount(MyApps, {
      //   localVue,
      vuetify,
      mocks: {
        $vuetify: { breakpoint: {} }
      },
      stubs: {
        SideBarComponent: true,
        FooterComponent: true
      }
    });
    await wrapper.setData({
      actor: [
        {
          firstname: "bob",
          lastname: "bob",
          group: "actors"
        }
      ]
    });

    console.log(wrapper.html()); //  TypeError: Cannot read property 'first name' of undefined
    console.log(wrapper.vm.actor[0].firstname); // "bob" if I set the template back to actor[0] so the test runs


  });
});

myapps.vue

<template>
  <div>
    <v-app>
      <v-col cols="3">
        <v-btn
          text
          @click="getAcceptedApplications"
          elevation="0"
          block
        >Accepted {{actor[0].firstname}}</v-btn>
      </v-col>
    </v-app>
  </div>
</template>

<script>
export default {
 async asyncData({ params, $axios, store }) {
    try {
      const body = store.getters.loggedInUser.id;
      const [applications, actor] = await Promise.all([
        $axios.$get(`/api/v1/apps/`, {
          params: {
            user: body
          }
        }),
        $axios.$get(`/api/v1/actors/`, {
          params: {
            user: body
          }
        })
      ]);
      return { applications, actor };
      if (applications.length == 0) {
        const hasApps = false;
      }
    } catch (error) {
      if (error.response.status === 403) {
        const hasPermission = false;
        console.log(hasPermission, "perm");
        console.error(error);
        return { hasPermission };
      }
    }
  },
  data() {
    return {
      actor: []
    };
  }
};
</script>

Answer 1

尽量不要使用setData方法，通过data这样挂载组件：

const wrapper = mount(MyApps, {
  vuetify,
  mocks: {
    $vuetify: { breakpoint: {} }
  },
  stubs: {
    SideBarComponent: true,
    FooterComponent: true
  }
  data: () => ({
    actor: [
       {
          firstname: "bob",
          lastname: "bob",
          group: "actors"
       }
    ]
  })
})

渲染 Vue 测试 setData 对象属性时出现 TypeError

TypeError when rendering property of Vue-test setData object

vuejs2

jestjs

vue-test-utils

渲染 Vue 测试 setData 对象 属性 时出现 TypeError

TypeError when rendering property of Vue-test setData object

vuejs2

jestjs

vue-test-utils

渲染 Vue 测试 setData 对象属性时出现 TypeError