Mock beforeMount in jest wrapper

Question

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?

andreyunugro andreyunugro · Accepted Answer · 2020-12-04T18:02:03

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

Mock beforeMount in jest wrapper

1 Answers