CODEWITHSUNDEEP
unit-testingvue.jsjestjs
Nicolas Michelet
Nicolas Michelet

Reputation: 11

Mock beforeMount in jest wrapper

I am currently trying to test my vue component with Jest. I have a beforeMount hook in my index.vue file which looks like that

beforeMount() {
    this.ProjectName = this.$route.query.ProjectName
    this.loadOutputs()
}

With the method loadOutputs()

loadOutputs() {
    this.Project.name
    const path = 'http://localhost:5000/loadoutputs'
      axios
        .post(path)
        .then((res) => {
        this.Results = res.data
        })
}

I am trying to write a test but I cannot find how to mock the beforeMount hook in my wrapper

import { shallowMount, createLocalVue } from '@vue/test-utils'

import My_Page from '@/views/test/index'
import ProjectInputs from '../json/Project_inputs.json'
import ProjectStatusInputs from '../json/Project_status.json'
import Project_Results from '../json/Project.json'

import Vue from 'vue'
import axios from 'axios'
import Vuex from 'vuex'

jest.mock('axios')

describe('My_Page', () => {
    const localVue = createLocalVue()
    localVue.use(Vuex)
    localVue.use(ElementUI)
    let My_PageId = 1

    const $router = {
        push: jest.fn(),
    }

    let store = new Vuex.Store({
        state: {
            Project: ProjectInputs,
            ProjectStatus: ProjectStatusInputs
        }
    })
    
    const wrapper = shallowMount(My_Page, {
        localVue,
        store,
        mocks: {
            $router,
            $route: {
                params: {
                    My_PageId : My_PageId ,
                },
                query: {
                    ProjectName: 'Name'
                }
            }
        }
    })

And it always gives me the same error

Cannot read property 'variable' of undefined

because it does not mock the Results variable. I have an example of the Results variable in Project_Results but I do not know how to put it into my wrapper.

Any idea?

Upvotes: 1

Views: 2592

Answers (1)

andreyunugro
andreyunugro

Reputation: 1116

You are in the correct way. You have defined axios mock module with jest. You just need to define the behaviour of your mock. The behaviour that you want is: when axios.post get called, resolve it with specific response data. (reference)

I created a simple component and test spec based on your code as example.

// @file ViewTest.vue
<template>
  <div></div>
</template>

<script>
import axios from 'axios';

export default {
  beforeMount() {
    this.ProjectName = this.$route.query.ProjectName;
    this.loadOutputs();
  },
  methods: {
    loadOutputs() {
      const path = 'http://localhost:5000/loadoutputs';
      axios.post(path).then((res) => {
        // Notes:
        // - set Results is inside then method (resolve condition).
        // - Results get only property data from res.
        this.Results = res.data;
      });
    },
  },
};
</script>

Spec file

// @file: 64753951.spec.js
import { shallowMount } from '@vue/test-utils';
import SimpleComponent from '@/components/SimpleComponent.vue';
import axios from 'axios';

jest.mock('axios');

describe('SimpleComponent', () => {
  // Use async here.
  it('beforeMount check', async () => {
    // Put axios.post result here.
    const fakeResult = { data: 'xxx' };
    // Define mock axios post here.
    axios.post.mockResolvedValue(fakeResult);

    // Note: need to await for beforeMount to finish.
    const wrapper = await shallowMount(SimpleComponent, {
      mocks: {
        $route: {
          query: {
            ProjectName: 'Name',
          },
        },
      },
    });

    // Check whether ProjectName set correctly from mocks.$route.query.
    expect(wrapper.vm.ProjectName).toEqual('Name');
    // Check whether property Results set correctly from mock axios resolve value.
    expect(wrapper.vm.Results).toEqual(fakeResult.data);
  });
});

Then I run it from terminal

$ npx jest test/64753951.spec.js
 PASS  test/64753951.spec.js
  SimpleComponent
    ✓ beforeMount check (7 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.377 s

Upvotes: 1

Related Questions