单元测试 vue – Famous blog

模拟第三方库

import { mount, createLocalVue  } from '@vue/test-utils'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
describe('HelloWorld.vue', () =&gt; {
  it('renders props.msg when passed', () => {
    const localVue = createLocalVue()
    localVue.use(Vuex)
    localVue.use(ElementUI)
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      // 做一个数据的传
      propsData: { msg },
      // 使用 store
      store,
      // 避免混入和安装插件而污染全局 Vue
      localVue,
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

jest.config.js 设置

因为项目中有引用 element-ui 和 vue-awesome，需要被 babel 解析，排除掉这两个包，在 jest.config.js 中配置

transformIgnorePatterns: [
    'node_modules/(?!(element-ui|vue-awesome)/)'
 ],
哪些文件是测试文件
testMatch: ['\*\*/\_\_tests\_\_/\*\*/\*.js?(x)','\*\*/?(*.)(spec|test).js?(x)']
moduleNameMapper: {
		"^@/(.*)$": "<rootDir>/src/$1"
	}

因为很多测试组件的时候需要引入很多文件或包，所以就提出来 js 文件，类似 vue 的 main.js ，做入口的统一处理，创建 tests/unit/lib/before-test.js 【基本的都是在 main.js 中引入的或添加】


import element from '@/plugins/element'
import baseComponent from '@/plugins/base-component'
import registeSvgIcon from '@/plugins/registe-svg-icon'
import API from '@/request/api'
import axios from '@/request'
import utils from '@/utils'
jest.mock('axios')
export default (Vue) => {
  element(Vue)
  baseComponent(Vue)
  registeSvgIcon(Vue)
  Vue.prototype.$API = API
  Vue.prototype.axios = axios
  Vue.prototype.$util = utils
}

在其他测试文件引入 import ‘./lib/before-test’

请求测试

created() {
    UserApi.getUserInfo()
      .then((user) => {
        this.user = user;
      });
  },

// api 接口 ./src/apis/user.js
function getUserInfo() {
  return $http.get('/user');
}

export default {
  getUserInfo,
};

测试
// ./src/components/user-info/user-info.spec.js
import { shallowMount } from '@vue/test-utils';
import UserInfo from './user-info'; // 组件
import UserApi from '../../apis/user';

// mock 掉 user 模块
jest.mock('../../apis/user');

// 指定 getUserInfo 方法返回假数据
UserApi.getUserInfo.mockResolvedValue({
  name: 'olive',
  desc: 'software engineer',
});

describe('<user-info/>', () => {
  const wrapper = shallowMount(UserInfo);
  test('getUserInfo 有且只 call 了一次', () => {
    expect(UserApi.getUserInfo.mock.calls.length).toBe(1);
  });
  it('用户信息渲染正确', () => {
    expect(wrapper.find('.name').text()).toEqual('olive');
    expect(wrapper.find('.desc').text()).toEqual('software engineer');
  });
});

jest.config.js 设置

Leave a Reply Cancel reply