Unit testing 开玩笑地装模作样

我目前正在尝试使用Jest测试我的vue组件。 我的index.vue文件中有一个beforeMount钩子，看起来是这样的

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

使用loadOutputs（）方法

我正试图编写一个测试，但我找不到如何在包装器中模拟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'
                }
            }
        }
    })

它总是给我同样的错误

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

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

---

有什么想法吗？

你的方法是正确的。您已经使用jest定义了axios模拟模块。您只需要定义mock的行为。您想要的行为是：调用axios.post时，使用特定的响应数据解析它。（）

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

/@file ViewTest.vue
从“axios”导入axios；
导出默认值{
beforeMount（）{
this.ProjectName=this.$route.query.ProjectName；
这是loadOutputs（）；
},
方法：{
loadOutputs（）{
常数路径http://localhost:5000/loadoutputs';
axios.post（路径）。然后（（res）=>{
//注:
//-设置结果在then方法中（解决条件）。
//-结果仅从res获取属性数据。
结果=分辨率数据；
});
},
},
};

规格文件

/@文件：64753951.spec.js
从'@vue/test-utils'导入{shallowMount}；
从'@/components/SimpleComponent.vue'导入SimpleComponent；
从“axios”导入axios；
开玩笑的模仿（‘axios’）；
描述（'SimpleComponent'，（）=>{
//在这里使用异步。
它（'beforeMount check'，async（）=>{
//将axios.post结果放在这里。
const fakeResult={data:'xxx'}；
//在这里定义模拟axios post。
axios.post.mockResolvedValue（fakeResult）；
//注意：需要等待安装前完成。
常量包装器=等待浅装（SimpleComponent{
模拟：{
$路线：{
查询：{
ProjectName:'名称'，
},
},
},
});
//检查是否从模拟中正确设置了ProjectName。$route.query。
expect（wrapper.vm.ProjectName）.toEqual（'Name'）；
//检查是否从模拟axios resolve值正确设置了属性结果。
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

---

非常感谢你的帮助，这将是非常有用的。我不得不开玩笑，但我肯定会用你的解决方案。再次感谢。

$ 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