文章/答案/技术大牛

发布

社区首页 >问答首页 >在jest包装器中模拟beforeMount

问在jest包装器中模拟beforeMount
EN

Stack Overflow用户

提问于 2020-11-09 14:53:39

回答 1查看 1.4K关注 0票数 1

我目前正在尝试用Jest测试我的vue组件。我的index.vue文件中有一个类似于此的index.vue钩子

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

使用loadOutputs()方法

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

我试图编写一个测试，但是我找不到如何在我的包装器中模拟beforeMount钩子。

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'
                }
            }
        }
    })

它总是给我同样的错误

无法读取未定义的属性“变量”

因为它不模拟结果变量。我在Project_Results中有一个结果变量的例子，但是我不知道如何将它放入包装器中。

有什么想法吗？

unit-testing

vue.js

jestjs

回答 1

Stack Overflow用户

发布于 2020-12-04 18:02:03

你走的路是对的。您已经用jest定义了axios模拟模块。你只需要定义你的模拟行为。您想要的行为是:当axios.post被调用时，使用特定的响应数据解析它。(参考文献)

我以您的代码为例创建了一个简单的组件和测试规范。

// @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>

规格文件

// @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);
  });
});

然后我从终端机运行

$ 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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64753951

复制

相似问题

问在jest包装器中模拟beforeMount
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jest包装器中模拟beforeMountEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jest包装器中模拟beforeMount
EN