1

I am testing though Jest on the Vue 2.x, nuxtjs and @nuxtjs/composition-api. However, the state value in the components has undefined value when testing though 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>

error message

TypeError: Cannot read property 'data' of undefined

I am testing though Jest on the Vue 2.x, nuxtjs and @nuxtjs/composition-api. However, the state value in the components has undefined value when testing though jest why error on this ?? because of composition API that define the state with reactive() function ??

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
kkong101
  • 11
  • 2
  • mate why we have react tagged for vue js :-) – Shyam Aug 26 '21 at 07:34
  • 1
    Did you try importing the composition API also to your test code? It looks like this did the trick for someone else. https://stackoverflow.com/questions/60377091/how-to-unit-testing-with-jest-in-vue-composition-api-component – hawc Aug 26 '21 at 07:52
  • Yes I tried but It doesn't work.. I did import @nuxtjs/composition-api and @vue/composition-api as well. however it same – kkong101 Aug 26 '21 at 08:07

1 Answers1

0

In your test file maybe you can try something like this:

it('11111', () => {
    const wrapper = shallowMount(List, {
      localVue,
      vuetify,
      propsData: { data: mockOrder },
      mocks: { $t, localePath },
      data: () => {
        return {
          data: mockOrder,
        };
      },
    });
YolloDev
  • 31
  • 7
  • I tried that but, It doesn't work. In the vue test utils web site(https://vue-test-utils.vuejs.org/api/options.html#data) data() {} is recommended – kkong101 Aug 26 '21 at 09:09