详解Jest结合Vue-test-utils使用的初步实践

npm install --save-dev jest @vue/test-utils

// package.json
{
 "scripts": {
  "test": "jest"
 }
}

npm install --save-dev vue-jest

module.exports = {
 moduleFileExtensions: ['js', 'json', 'vue'],
 moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/src/$1'
 },
 transform: {
  '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
  '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
 },
}

import { mount } from '@vue/test-utils'
import Component from './component'

describe('Component', () => {
 test('是一个 Vue 实例', () => {
  const wrapper = mount(Component)
  expect(wrapper.isVueInstance()).toBeTruthy()
 })
})

import Vue from 'vue';
import Test1 from '@/components/Test1';

const Constructor = Vue.extend(HelloWorld);
const vm = new Constructor().$mount();

npm run unit

import Page from '@/components/Test5/Test5'

module.exports = {
 ...
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': path.join(__dirname, '..', 'src')
  }
 },
}

"jest": {
 "moduleNameMapper": {
  '^@/(.*)$': "<rootDir>/src/$1",
 },
...

<template>
 <div id="app">
  <Page :messages="messages"></Page>
 </div>
</template>

<script>
 import Page from '@/components/Test1'

 export default {
  name: 'App',
  data() {
   return {
    messages: ['Hello Jest', 'Hello Vue']
   }
  },
  components: {
   Page
  }
 }
</script>

<template>
 <div>
  <p v-for="message in messages" :key="message">{{message}}</p>
 </div>
</template>

<script>
  export default {
  props: ['messages'],
  data() {
   return {}
  }
 }
</script>

// 从测试实用工具集中导入 `mount()` 方法
import { mount } from 'vue-test-utils';
// 导入你要测试的组件
import App from '@/App';

describe('App.test.js', () => {
 let wrapper,
  vm;

 beforeEach(() => {
  wrapper = mount(App);
  vm = wrapper.vm;
  wrapper.setProps({ messages: ['Cat'] })
 });

 it('equals messages to ["Cat"]', () => {
  expect(vm.messages).toEqual(['Cat'])
 });

 // 为App的单元测试增加快照（snapshot）：
 it('has the expected html structure', () => {
  expect(vm.$el).toMatchSnapshot()
 })
});

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App.test.js has the expected html structure 1`] = `
<div
 id="app"
>
 <div>
  <p>
   Cat
  </p>
 </div>
</div>
`;

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App.test.js has the expected html structure 1`] = `
<div
 id="app"
>
 <!---->
</div>
`;

describe('Test for Test1 Component', () => {
 let wrapper,
  vm;

 beforeEach(() => {
  // wrapper = mount(App);
  wrapper = shallow(Test1, {
   propsData: {
    messages: ['bye']
   }
  });
 });

 it('is a Test1 component', () => {
  // 使用Vue组件选择器
  expect(wrapper.is(Test1)).toBe(true);
  // 使用CSS选择器
  expect(wrapper.is('.outer')).toBe(true);
  // 使用CSS选择器
  expect(wrapper.contains('p')).toBe(true)
 });
});

// exists()：断言 Wrapper 或 WrapperArray 是否存在。
it('不存在img', () = > {
 expect(wrapper.findAll('img').exists()).toBeFalsy()
});

// isEmpty()：断言 Wrapper 并不包含子节点。
it('MyButton组件不为空', () = > {
 expect(wrapper.find(MyButton).isEmpty()).toBeFalsy()
});

// attributes()：返回 Wrapper DOM 节点的特性对象
// classes()：返回 Wrapper DOM 节点的 class 组成的数组
it('MyButton组件有my-class类', () = > {
 expect(wrapper.find(MyButton).attributes().class).toContain('my-button');
 expect(wrapper.find(MyButton).classes()).toContain('my-button');
})

// hasStyle：判断是否有对应的内联样式
it('MyButton组件有my-class类', () = > {
  expect(wrapper.find(MyButton).hasStyle('padding-top', '10')).toBeTruthy()
})

const wrapper = mount(Foo, {
 propsData: {
  foo: 'bar'
 }
})

const wrapper = mount(Foo)
wrapper.setProps({ foo: 'bar' })

beforeEach(() = > {
 wrapper = mount(Test1, {
  propsData: {
   messages: ['bye']
  }
 });
});

// props：返回 Wrapper vm 的 props 对象。
it('接收到了bye作为Props', () = > {
 expect(wrapper.props().messages).toContain('bye')
});

props: {
 messages: {
  type: Array,
  required: true,
  validator: (messages) = > messages.length > 1,
  default () {
   return [0, 2]
  }
 }
},

// vm.$options返回Vue实例的初始化选项
describe('验证Props的各个属性', () = > {
 wrapper = mount(Test1, {
  propsData: {
   messages: ['bye', 'bye', 'bye']
  }
 });
 const messages = wrapper.vm.$options.props.messages;
 it('messages is of type array', () = > {
  expect(messages.type).toBe(Array)
 });
 it('messages is required', () = > {
  expect(messages.required).toBeTruthy()
 });
 it('messages has at least length 2', () = > {
  expect(messages.validator && messages.validator(['a'])).toBeFalsy();
  expect(messages.validator && messages.validator(['a', 'a'])).toBeTruthy();
 });
 wrapper.destroy()
});

// TEST1
<MyButton class="my-button" style="padding-top: 10px" buttonValue="Me" @add="addCounter"></MyButton>

// 省略一些代码

methods: {
 addCounter(value) {
  this.count = value
 }
},

<button @click="increment">Click {{buttonValue}} {{innerCount}}</button>、

// 省略一些代码

data() {
 return {
  innerCount: 0
 }
},
computed: {},
methods: {
 increment() {
  this.innerCount += 1;
  this.$emit('add', this.innerCount)
 }
},

describe('Test for MyButton Component', () => {
 const wrapper = mount(MyButton);

 it('calls increment when click on button', () => {
  // 创建mock函数
  const mockFn = jest.fn();
  // 设置 Wrapper vm 的方法并强制更新。
  wrapper.setMethods({
   increment: mockFn
  });
  // 触发按钮的点击事件
  wrapper.find('button').trigger('click');
  expect(mockFn).toBeCalled();
  expect(mockFn).toHaveBeenCalledTimes(1)
 })
});

// increment方法会触发add方法
it('triggers a addCounter event when a handleClick method is called', () = > {
 const wrapper = mount(MyButton);

 // mock自定义事件
 const mockFn1 = jest.fn();
 wrapper.vm.$on('add', mockFn1);

 // 触发按钮的点击事件
 wrapper.find('button').trigger('click');
 expect(mockFn1).toBeCalled();
 expect(mockFn1).toHaveBeenCalledWith(1);

 // 再次触发按钮的点击事件
 wrapper.find('button').trigger('click');
 expect(mockFn1).toHaveBeenCalledTimes(2);
 expect(mockFn1).toHaveBeenCalledWith(2);
})

// $emit 触发自定义事件
describe('验证addCounter是否被触发', () = > {
 wrapper = mount(Test1);
 it('addCounter Fn should be called', () = > {
  const mockFn = jest.fn();
  wrapper.setMethods({
   'addCounter': mockFn
  });
  wrapper.find(MyButton).vm.$emit('add', 100);
  expect(mockFn).toHaveBeenCalledTimes(1);
 });
 wrapper.destroy()
});

<template>
 <div class="wrapper">
  <label for="input">输入：</label>
  <input id="input" type="text" v-model="inputValue">
  <p>输出：{{outputValue}}</p>
 </div>
</template>

<script>
 export default {
  name: 'Test2',
  props: {
   needReverse: {
    type: Boolean,
    default: false
   }
  },
  data() {
   return {
    inputValue: ''
   }
  },
  computed: {
   outputValue () {
    return this.needReverse "htmlcode">

describe('Test for Test2 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = shallow(Test2);
 });

 afterEach(() => {
  wrapper.destroy()
 });

 it('returns the string in normal order if reversed property is not true', () => {
  wrapper.setProps({needReverse: false});
  wrapper.vm.inputValue = 'ok';
  expect(wrapper.vm.outputValue).toBe('ok')
 });

 it('returns the string in normal order if reversed property is not provided', () => {
  wrapper.vm.inputValue = 'ok';
  expect(wrapper.vm.outputValue).toBe('ok')
 });

 it('returns the string in reversed order if reversed property is true', () => {
  wrapper.setProps({needReverse: true});
  wrapper.vm.inputValue = 'ok';
  expect(wrapper.vm.outputValue).toBe('ko')
 })

});




测试监听器


Vue提供的watch选项提供了一个更通用的方法，来响应数据的变化。
为Test添加侦听器：


watch: {
 inputValue: function(newValue, oldValue) {
  if (newValue.trim().length > 0 && newValue !== oldValue) {
   this.printNewValue(newValue)
  }
 }
},
methods: {
 printNewValue(value) {
  console.log(value)
 }
},



为了测试，首先开始测试前将console的log方法用jest的spyOn方法mock掉，最好在测试结束后通过mockClear方法将其重置，避免无关状态的引入。


describe('Test watch', () = > {
  let spy;
  beforeEach(() = > {
   wrapper = shallow(Test2);
   spy = jest.spyOn(console, 'log')
  });
  afterEach(() = > {
   wrapper.destroy();
   spy.mockClear()
  });
}



然后执行给inputValue赋值，按照预期，spy方法会被调用


it('is called with the new value in other cases', () = > {
 wrapper.vm.inputValue = 'ok';
 expect(spy).toBeCalled()
});



但是在执行之后我们发现并非如此，spy并未被调用，原因是：
watch中的方法被Vue**推迟**到了更新的下一个循环队列中去异步执行，如果这个watch被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的性能开销。
所以当我们设置了inputValue为'ok'之后，watch中的方法并没有立刻执行，但是expect却执行了，所以断言失败了。
解决方法就是将断言放到$nextTick中，在下一个循环队列中执行，同时在expect后面执行Jest提供的done()方法，Jest会等到done()方法被执行才会结束测试。


it('is called with the new value in other cases', (done) = > {
 wrapper.vm.inputValue = 'ok';
 wrapper.vm.$nextTick(() = > {
  expect(spy).toBeCalled();
  done()
 })
});



在测试第二个情况时，由于对inputValue赋值时spy会被执行一次，所以需要清除spy的状态，这样才能得出正确的预期：


it('is not called with same value', (done) = > {
 wrapper.vm.inputValue = 'ok';
 wrapper.vm.$nextTick(() = > {
  // 清除已发生的状态
  spy.mockClear();
  wrapper.vm.inputValue = 'ok';
  wrapper.vm.$nextTick(() = > {
   expect(spy).not.toBeCalled();
   done()
  })
 })
});



测试方法


单元测试的核心之一就是测试方法的行为是否符合预期，在测试时要避免一切的依赖，将所有的依赖都mock掉。
创建Test3组件，输入问题后，点击按钮后，使用axios发送HTTP请求，获取答案


<template>
 <div class="wrapper">
  <label for="input">问题：</label>
  <input id="input" type="text" v-model="inputValue">
  <button @click="getAnswer">click</button>
  <p>答案：{{answer}}</p>
  <img :src="/UploadFiles/2021-04-02/src">

jest.mock('dependency-path', implementationFunction)


在Test3.spec.js中，首先将axios中的get方法替换为我们的mock函数，然后引入相应的模块


jest.mock('axios', () => ({
 get: jest.fn()
}));
import { shallow } from 'vue-test-utils';
import Test3 from '@/components/Test3';
import axios from 'axios';



然后测试点击按钮后，axios的get方法是否被调用：


describe('Test for Test3 Component', () => {
 let wrapper;

 beforeEach(() => {
  axios.get.mockClear();
  wrapper = shallow(Test3);
 });

 afterEach(() = > {
  wrapper.destroy()
 });

 // 点击按钮后调用了 getAnswer 方法
 it('getAnswer Fn should be called', () => {
  const mockFn = jest.fn();
  wrapper.setMethods({getAnswer: mockFn});
  wrapper.find('button').trigger('click');
  expect(mockFn).toBeCalled();
 });

 // 点击按钮后调用了axios.get方法
 it('axios.get Fn should be called', () => {
  const URL = 'https://yesno.wtf/api';
  wrapper.find('button').trigger('click');
  expect(axios.get).toBeCalledWith(URL)
 });
});


测试结果发现，虽然我们的mock函数被调用了，但是控制台还是报错了，原因是我们mock的axios.get方法虽然被调用了，但是并没有返回任何值，所以报错了，所以下一步我们要给get方法返回一个Promise，查看方法能否正确处理我们返回的数据
jest.fn()接受一个工厂函数作为参数，这样就可以定义其返回值


const mockData = {
 data: {
  answer: 'mock_yes',
  image: 'mock.png'
 }
};
jest.mock('axios', () => ({
 get: jest.fn(() => Promise.resolve(mockData))
}));



getAnswer是一个异步请求，Jest提供的解决异步代码测试的方法有以下三种：

  
回调函数中使用done()参数
  
Pomise
  
Aysnc/Await

第一种是使用在异步请求的回调函数中使用Jest提供的叫做done的单参数，Jest会等到done()执行结束后才会结束测试。
我们使用第二种和第三种方法来测试getAnswer方法的返回值，前提就是在方法中返回一个Promise。（一般来说，在被测试的方法中给出一个返回值会让测试更加容易）。 Jest会等待Promise解析完成。 如果承诺被拒绝，则测试将自动失败。


// axios.get方法返回值（Promise）
it('Calls get promise result', () = > {
 return expect(wrapper.vm.getAnswer()).resolves.toEqual(mockData);
});
 



或者可以使用第三种方法，也就是使用async和await来测试异步代码：


// 可以用 Async/Await 测试 axios.get 方法返回值
it('Calls get promise result 3', async() = > {
 const result = await wrapper.vm.getAnswer();
 expect(result).toEqual(mockData)
});


Jest都提供了resolves和rejects方法作为then和catch的语法糖：


it('Calls get promise result 2', () = > {
 return wrapper.vm.getAnswer().then(result = > {
  expect(result).toEqual(mockData);
 })
});

it('Calls get promise result 4', async() = > {
 await expect(wrapper.vm.getAnswer()).resolves.toEqual(mockData)
});




mock依赖


我们可以创建一个__mocks__文件夹，将mock文件放入其中，这样就不必在每个测试文件中去单独的手动mock模块的依赖
在__mocks__文件夹下创建axios.js文件：


// test/__mocks__/axios.js
const mock = {
 get: jest.fn(() => Promise.resolve({
  data: {
   answer: 'mock_yes',
   image: 'mock.png'
  }
 }))
};
export default mock


这样就可以将Test3.spec.js中的jest.mock部分代码移除了。Jest会自动在__mocks__文件夹下寻找mock的模块，但是有一点要注意，模块的注册和状态会一直被保存，所有如果我们在Test3.spec.js最后增加一条断言：


// 如果不清除模块状态此条断言会失败
it('Axios should not be called here', () = > {
 expect(axios.get).not.toBeCalled()
});



因为我们在beforeEach中添加了axios.get的状态清除的语句 axios.get.mockClear()，所以上面的断言会通过，否则会失败。
也可以用另外resetModules和clearAllMocks来确保每次开始前都重置模块和mock依赖的状态。


beforeEach(() = > {
 wrapper = shallow(Test3);
 jest.resetModules();
 jest.clearAllMocks();
});



我们在项目中有时候会根据需要对不同的Http请求的数据进行Mock，以MockJS为例，一般每个组件（模块）都有对应的mock文件，然后通过index.js导入到系统。Jest也可以直接将MockJS的数据导入，只需要在setup.js中导入MockJS的index.js文件即可
测试插槽


插槽（slots）用来在组件中插入、分发内容。创建一个使用slots的组件Test4


// TEST4
<MessageList>
  <Message v-for="message in messages" :key="message" :message="message"></Message>
</MessageList>

// MessageList
<ul class="list-messages">
 <slot></slot>
</ul>

// Message
<li>{{message}}</li>




在测试slots时，我们的关注点是slots中的内容是否在组件中出现在该出现的位置，测试方法和前面介绍的测试DOM结构的方法相同。
具体到例子中来看，我们要测试的是：Message组件是否出现在具有list-messages的类的ul中。在测试时，为了将slots传递给MessageList组件，我们在MessageList.spec.js中的mount或者shallow方法中使用slots属性


import { mount } from 'vue-test-utils';
import MessageList from '@/components/Test4/MessageList';

describe('Test for MessageList of Test4 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = mount(MessageList, {
   slots: {
    default: '<div class="fake-msg"></div>'
   }
  });
 });

 afterEach(() => {
  wrapper.destroy()
 });

 // 组件中应该通过slots插入了div.fake-msg
 it('Messages are inserted in a ul.list-messages element', () => {
  const list = wrapper.find('ul.list-messages');
  expect(list.contains('div.fake-msg')).toBeTruthy()
 })
});




为了测试内容是否通过插槽插入了组件，所以我们伪造了一个div.fake-msg通过slots选项传入MessageList组件，断言组件中应该存在这个div
不仅如此，slots选项还可以传入组件或者数组：


import AnyComponent from 'anycomponent'

mount(MessageList, {
 slots: {
  default: AnyComponent // or [AnyComponent, AnyComponent]
 }
})




这里面有一个问题，例如我们想测试Message组件是否通过插槽插入了MessageList组件中，我们可以将slots选项中传入Message组件，但是由于Message组件需要传入message作为Props，所以按照上面的说明，我们应该这样做：


beforeEach(() = > {
 const fakeMessage = mount(Message, {
  propsData: {
   message: 'test'
  }
 });
 wrapper = mount(MessageList, {
  slots: {
   default: fakeMessage
  }
 })
});



对应的断言是：


// 组件中应该通过slots插入了Message，并且传入的文本是test
it('Messages are inserted in a ul.list-messages element', () = > {
 const list = wrapper.find('ul.list-messages');
 expect(list.contains('li')).toBeTruthy();
 expect(list.find('li').text()).toBe('test')
})



但是这会失败，查了资料，貌似不能通过这种方式mounted的组件传入slots中。
虽然如此，我们可以而通过渲染函数（render function）来作为一种非正式的解决方法：


const fakeMessage = {
 render(h) {
  return h(Message, {
   props: {
    message: 'test'
   }
  })
 }
};
wrapper = mount(MessageList, {
 slots: {
  default: fakeMessage
 }
})



测试命名插槽（Named Slots）


测试命名插槽和默认插槽原理相同，创建Test5组件，里面应用新的MessageList组件，组件中增加一个给定名字为header的插槽，并设定默认内容：


<div>
 <header class="list-header">
  <slot name="header">This is a default header</slot>
 </header>
 <ul class="list-messages">
  <slot></slot>
 </ul>
</div>



在Test5中就可以使用这个命名插槽：


<MessageList>
 <header slot="header">Awesome header</header>
 <Message v-for="message in messages" :key="message" :message="message"></Message>
</MessageList>



对MessageList组件进行测试时，首先测试组件中是否渲染了命名插槽的默认内容：


// 渲染命名插槽的默认内容
it('Header slot renders a default header text', () = > {
 const header = wrapper.find('.list-header');
 expect(header.text()).toBe('This is a default header')
});



然后测试插槽是否能插入我们给定的内容，只需要将mount方法中的slots选项的键值default改为被测试的插槽的name即可：


// 向header插槽中插入内容
it('Header slot is rendered withing .list-header', () = > {
 wrapper = mount(MessageList, {
  slots: {
   header: '<header>What an awesome header</header>'
  }
 });
 const header = wrapper.find('.list-header');
 expect(header.text()).toBe('What an awesome header')
})



测试debounce


我们经常使用lodash的debounce方法，来避免一些高频操作导致的函数在短时间内被反复执行，比如在Test6组件中，对button的点击事件进行了debounce，频率为500ms，这就意味着如果在500ms内如果用户再次点击按钮，handler方法会被推迟执行：


<template>
 <div class="outer">
  <p>This button has been clicked {{count}}</p>
  <button @click="addCounter">click</button>
 </div>
</template>

<script>
 import _ from 'lodash';
 export default {
  data() {
   return { count: 0 }
  },
  methods: {
   addCounter: _.debounce(function () {
    this.handler()
   }, 500),
   handler() {
    this.count += 1;
   }
  }
 }
</script>


在编写Test6的单元测试时，我们有一个这样的预期：当addCounter方法被触发时，500ms内没有任何后续操作，handler方法会被触发
如果没有进行特殊的处理，单元测试文件应该是这样的：


import { shallow } from 'vue-test-utils';
import Test6 from '@/components/Test6';

describe('Test for Test6 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = shallow(Test6);
 });

 afterEach(() => {
  wrapper.destroy()
 });

 it('test for lodash', () => {
  const mockFn2 = jest.fn();
  wrapper.setMethods({ handler: mockFn2 });
  wrapper.vm.addCounter();
  expect(mockFn2).toHaveBeenCalledTimes(1);
 })
});




测试结果发现，addCounter被触发时handler方法并没有执行
因为lodash中debounce方法涉及到了setTimeout，`hanlder方法应该是在500ms后执行，所以在此时执行时方法没有执行。
所以我们需要在Jest中对setTimeout进行特殊的处理：Jest提供了相关的方法，我们需要使用的是jest.useFakeTimers()和jest.runAllTimers()
前者是用来让Jest模拟我们用到的诸如setTimeout、setInterval等计时器，而后者是执行setTimeout、setInterval等异步任务中的宏任务（macro-task）并且将需要的新的macro-task放入队列中并执行，更多信息的可以参考官网的timer-mocks。
所以对test6.spec.js进行修改，在代码开始增加jest.useFakeTimers()，在触发addCounter方法后通过jest.runAllTimers()触发macor-task任务


jest.useFakeTimers();

import { shallow } from 'vue-test-utils';
import Test6 from '@/components/Test6';
import _ from 'lodash';

describe('Test for Test6 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = shallow(Test6);
 });

 afterEach(() => {
  wrapper.destroy()
 });

 it('test for lodash', () => {
  const mockFn2 = jest.fn();
  wrapper.setMethods({ handler: mockFn2 });
  wrapper.vm.addCounter();

  jest.runAllTimers();

  expect(mockFn2).toHaveBeenCalledTimes(1);
 })
});




结果还是失败，报错原因是：

Ran 100000 timers, and there are still more! Assuming we've hit an infinite recursion and bailing out…

程序陷入了死循环，换用Jest提供额另外一个API：jest.runOnlyPendingTimers()，这个方法只会执行当前队列中的macro-task，遇到的新的macro-task则不会被执行
将jest.runAllTimers()替换为jest.runOnlyPendingTimers()后，上面的错误消失了，但是handler仍然没有被执行
在查了许多资料后，这可能是lodash的debounce机制与jest的timer-mocks 无法兼容，如果有人能够解决这个问题希望能够指教。
这样的情况下，我们退而求其次，我们不去验证addCounter是否会被debounce，因为debounce是第三方模块的方法，我们默认认为是正确的，我们要验证的是addCounter能够正确触发handler方法即可。
所以我们可以另辟蹊径，通过mock将lodash的debounce修改为立即执行的函数，我们要做的是为lodash的debounce替换为jest.fn()，并且提供一个工厂函数，返回值就是传入的函数


import _ from 'lodash';

jest.mock('lodash', () => ({
 debounce: jest.fn((fn => fn))
}));




在如此修改后，测试通过，handler方法正确执行
同一个方法的多次mock


在一个组件中，我们可能会多次用到同一个外部的方法，但是每次返回值是不同的，我们可能要对它进行多次不同的mock
举个例子，在组件Test7中，mounted的时候forData返回一个数组，经过map处理后赋给text，点击getResult按钮，返回一个0或1的数字，根据返回值为result赋值


<template>
 <div class="outer">
  <p>{{text}}</p>
  <p>Result is {{result}}</p>
  <button @click="getResult">getResult</button>
 </div>
</template>

<script>
 import { forData } from '@/helper';
 import axios from 'axios'

 export default {
  data() {
   return {
    text: '',
    result: ''
   }
  },
  async mounted() {
   const ret = await forData(axios.get('text.do'));
   this.text = ret.map(val => val.name)
  },
  methods: {
   async getResult() {
    const res = await forData(axios.get('result.do'));
    switch (res) {
     case 0 : {
      this.result = '000';
      break
     }
     case 1 : {
      this.result = '111';
      break
     }
    }
   },
  }
 }
</script>


针对getResult方法编写单元测试，针对两种返回值编写了两个用例，在用例中将forData方法mock掉，返回值是一个Promise值，再根据给定的返回值，判断结果是否符合预期：


describe('Test for Test7 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = shallow(Test7);
 });

 afterEach(() => {
  wrapper.destroy()
 });

 it('test for getResult', async () => {
  // 设定forData返回值
  const mockResult = 0;
  const mockFn = jest.fn(() => (Promise.resolve(mockResult)));
  helper.forData = mockFn;

  // 执行
  await wrapper.vm.getResult();
  // 断言
  expect(mockFn).toHaveBeenCalledTimes(1);
  expect(wrapper.vm.result).toBe('000')
 });

 it('test for getResult', async () => {
  // 设定forData返回值
  const mockResult = 1;
  const mockFn = jest.fn(() => (Promise.resolve(mockResult)));
  helper.forData = mockFn;

  // 执行
  await wrapper.vm.getResult();
  // 断言
  expect(mockFn).toHaveBeenCalledTimes(1);
  expect(wrapper.vm.result).toBe('111')
 })
});


运行测试用例，虽然测试用例全部通过，但是控制台仍然报错了：
(node:17068) UnhandledPromiseRejectionWarning: TypeError: ret.map is 

not a function
为什么呢？
原因就是在于，在第一个用例运行之后，代码中的forData方法被我们mock掉了，所以在运行第二个用例的时候，执行mounted的钩子函数时，forData返回值就是我们在上个用例中给定的1，所以使用map方法会报错
为了解决这个问题，我们需要在beforeEach（或afterEach）中，重置forData的状态，如果在代码中使用了MockJS的情况下，我们只需要让默认的forData获取的数据走原来的路径，由MockJS提供假数据即可，这样我们只需要在一代码的最开始将forData保存，在beforeEach使用restoreAllMocks方法重置状态，然后在恢复forData状态，然后每个用例中针对forData进行单独的mock即可


const test = helper.forData;

describe('Test for Test7 Component', () => {
 let wrapper;

 beforeEach(() => {
  jest.restoreAllMocks();
  helper.forData = test;
  wrapper = shallow(Test7);
 });

 afterEach(() => {
  wrapper.destroy()
 });

 // 用例不变


如果没有使用MockJS，那么都需要我们提供数据，就需要在afterEach中提供mounted时需要的数据：


beforeEach(() = > {
 jest.restoreAllMocks();
 const mockResult = [{ name: 1}, {name: 2}];
 helper.forData = jest.fn(() = > (Promise.resolve(mockResult)));
 wrapper = shallow(Test7);
});
 



这样处理过后，运行用例通过，并且控制台也不会报错了。
如果是在同一个方法中遇到了需要不同返回结果的forData，比如下面的getQuestion方法:


async getQuestion() {
 const r1 = await forData(axios.get('result1.do'));
 const r2 = await forData(axios.get('result2.do'));
 const res = r1 + r2;
 switch (res) {
  case 2:
   {
    this.result = '222';
    break
   }
  case 3:
   {
    this.result = '333';
    break
   }
 }
},


通过forData发出了两个不同的HTTP请求，返回结果不同，这时我们在测试时就需要使用mockImplementationOnce方法，这个方法mock的函数只被调用一次，多次调用时就会根据定义时的顺序依次调用mock函数，所以测试用例如下：


it('test for getQuestion', async() = > {
 // 设定forData返回值
 const mockFn = jest.fn()
  .mockImplementationOnce(() = > (Promise.resolve(1)))
  .mockImplementationOnce(() = > (Promise.resolve(2)));
 helper.forData = mockFn;
 // 执行
 await wrapper.vm.getQuestion();
 // 断言
 expect(mockFn).toHaveBeenCalledTimes(2);
 expect(wrapper.vm.result).toBe('333')
});


测试用例通过，并且控制台无报错。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。