How to unit testing with jest in vue composition api component?

Question

I'm writing a unit test with jest, for my composition API component in vue.js.

But I can't access to functions in composition API's setup().

Indicator.vue

<template>
  <div class="d-flex flex-column justify-content-center align-content-center">
    <ul class="indicator-menu d-flex justify-content-center">
      <li v-for="step in steps" :key="step">
        <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a>
      </li>
    </ul>
    <div class="indicator-caption d-flex justify-content-center">
      step
      <span> {{ current }}</span>
      from
      <span> {{ steps }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import {createComponent} from '@vue/composition-api';

export default createComponent({
  name: 'Indicator',
  props: {
    steps: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      required: true
    }
  },
  setup(props, context) {
    const updateValue = (step: number) => {
      context.emit('clicked', step);
    };
    const activeClass = (step: number, current: number) =>
      step < current ? 'passed' : step === current ? 'current' : '';
    return {
      updateValue,
      activeClass
    };
  }
});
</script>

<style></style>

Indicator.test.ts

import Indicator from '@/views/components/Indicator.vue';
import { shallowMount } from '@vue/test-utils';

describe('@/views/components/Indicator.vue', () => {  
  let wrapper: any;
  beforeEach(() => {
    wrapper = shallowMount(Indicator, {
      propsData: {
        steps: 4,
        current: 2
      }
    });
  });
  it('should return "current" for values (2,2)', () => {
    expect(wrapper.vm.activeClass(2, 2)).toBe('current');
  });
});

And I got this Error, in running test command:

TypeError: Cannot read property 'vm' of undefined

Rob Axelsen · Accepted Answer · 2020-03-03 15:25:11Z

15

I think simply importing CompositionApi should solve your issue.

import CompositionApi from '@vue/composition-api'

Vue.use(CompositionApi)

answered Mar 3, 2020 at 15:25

Rob Axelsen

1,0347 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Petercopter Over a year ago

Looks like that did the trick, thanks! I bet we won't have to do this when Vue 3 hits.

Andrej Gaspar · Accepted Answer · 2022-01-25 10:26:35Z

1

I would also suggest to use jest.config.js file to initialize it by default:

setupFiles: ['<rootDir>/tests/helpers/foo.js']

then in your tests/ folder create helpers/ with file foo.js

and in file:

import Vue from 'vue'
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)

by this way it's available for each test file :)

edited Jan 25, 2022 at 10:26

answered Sep 6, 2021 at 11:39

Andrej Gaspar

3592 silver badges9 bronze badges

Comments

Mohammad · Accepted Answer · 2021-11-13 07:50:37Z

0

In nuxt.js version 2 @andrej-gaspar solution almost worked but it throws Cannot read property install of undefined error, so to fix that error do like below:

jest.config.js

setupFiles: ['<rootDir>/tests/helpers/foo.js']

foo.js

import Vue from 'vue'
import * as CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)

Or if you're using @nuxtjs/composition-api:

import Vue from 'vue'
import * as CompositionApi from '@nuxtjs/composition-api'
Vue.use(CompositionApi)

answered Nov 13, 2021 at 7:50

Mohammad

6811 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to unit testing with jest in vue composition api component?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related