渲染Vue-test setData对象的属性时出现TypeError

Question

我遇到了一个奇怪的情况，不知道为什么。基本上在我的 HTML 中，如果我渲染“actor [0]”，测试运行良好，控制台日志显示 setData 中存在的整个“actor”对象

但是，如果我尝试访问“actor”对象的属性，例如 actor[0].firstname，测试会抛出 TypeError-can't-read-property-of-undefined。

奇怪的部分是控制台日志记录“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"
       }
    ]
  })
})