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

Posted 2023-02-22

【中文标题】笑话：TypeError：无法读取未定义的属性“变量”

【英文标题】：Jest : TypeError: Cannot read property 'variable' of undefined

【发布时间】：2021-10-26 06:28:40

【问题描述】：

我正在 Vue 2.x、nuxtjs 和 @nuxtjs/composition-api 上测试 Jest。 但是，通过 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');
  );
);

List.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 js 标记了 react :-)

您是否尝试将组合 API 也导入到您的测试代码中？看起来这对别人有用。 ***.com/questions/60377091/…

是的，我试过了，但没用。我也导入了@nuxtjs/composition-api 和@vue/composition-api。但是一样

【参考方案1】：

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

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

【讨论】：

我试过了，但是不行。在vue测试utils网站(vue-test-utils.vuejs.org/api/options.html#data) data() 推荐