时间戳

首页 > 解决方案 > 笑话：TypeError：无法读取未定义的属性“变量”

vue.js - 笑话：TypeError：无法读取未定义的属性“变量”

问题描述

我正在 Vue 2.x、nuxtjs 和 @nuxtjs/composition-api 上测试 Jest。但是，通过开玩笑进行测试时，组件中的状态值具有未定义的值

List.spec.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import List from '@/components/home/list.vue';

Vue.use(Vuetify);

describe('List.vue', () => {
  const localVue = createLocalVue();
  let vuetify;

  const $t = () => {};
  const localePath = () => {};

  beforeEach(() => {
    vuetify = new Vuetify();
    localVue.use(vuetify);
  });

  const mockOrder = [
    {
      coardshare: {
        cs_id: 123,
      },
    },
    {
      talkboard: {
        cs_id: 123,
      },
    },
  ];

  it('11111', () => {
    const wrapper = shallowMount(List, {
      localVue,
      vuetify,
      propsData: { data: mockOrder },
      mocks: { $t, localePath },
      data() {
        return {
          data: mockOrder,
        };
      },
    });

    expect(wrapper.html()).toMatchSnapshot();
    const title = wrapper.find('.v-card__title > span');
    expect(title.text()).toBe('Foobar');
  });
});

列表.vue

<template>
...
<div v-for="item in state.data.talkboard" :key="item.cs_id">
    <ListItem :item="item"></ListItem>
</div>
...
</template>
<script>
import { reactive, onMounted, useContext } from '@nuxtjs/composition-api';
import axios from 'axios';
import Header from './header';
import ListItem from './list-item.vue';

export default {
  name: 'ListHome',
  components: {
    Header,
    ListItem,
  },
  setup() {
    const state = reactive({
      data: [],
    });

    const { store } = useContext();

    const fatch = async () => {
      ....
    };

    onMounted(fatch);

    return {
      state,
      fatch,
    };
  },
};
</script>

错误信息

TypeError: Cannot read property 'data' of undefined

我正在 Vue 2.x、nuxtjs 和 @nuxtjs/composition-api 上测试 Jest。但是，组件中的状态值在测试时具有未定义的值，尽管开玩笑为什么会出错？因为组合 API 定义了带有 reactive() 函数的状态？

标签： vue.jsjestjsnuxt.js

解决方案

在你的测试文件中，也许你可以尝试这样的事情：

it('11111', () => {
    const wrapper = shallowMount(List, {
      localVue,
      vuetify,
      propsData: { data: mockOrder },
      mocks: { $t, localePath },
      data: () => {
        return {
          data: mockOrder,
        };
      },
    });

推荐阅读