jest单元测试(以Vue为例)

一、安装 Jest：

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

详见: Vue

将如下代码添加到 package.json 中：

{
    "scripts": {
        "test": "jest"
    }
}

Jest 的配置可以在package.json你的项目的文件中定义，或者通过 jest.config.js

生成测试报告

npm run test

genhtml coverage/lcov.info -o coverage/html

open coverage/html/index.html

1.方法测试

import sum from './sum'; 

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

2.页面测试

import { shallowMount,createLocalVue } from '@vue/test-utils'
const localVue = createLocalVue()
import Foo from './Foo.vue'
import elementUI from 'element-ui'
import KyInput from '@/components/input/index'
localVue.use(KyInput)
localVue.use(elementUI)
const store = new Vuex.Store({
    modules: {
      app: {
        state: {
          address: 'shanghai',
        },
        mutations: {
          SET_ADDRESS: jest.fn(),
        },
        getters: {
          toUpperCase: state => state.address.toUpperCase()
        },
        action:{
        
        },
        namespaced: true
      }
    }
  })

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = shallowMount(Foo, {
      store,
      localVue,
      data () {
        return {
          account: [],
        }
      },
      mocks: {
        $t: key => key,
        $router: {
          go: jest.fn()
        }
      },
      stubs: {
        'el-dialog': true,
        'el-input': true,
        'el-button': true
      }
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

3.接口测试

// api/index.js
import axios from 'axios'
export function getBalance (data) {
  return request({
    url: https://api.xxx.xom,
    method: 'get',
    params: {
      actor: data
    }
  })
}

const request = axios.create({
  // baseURL: '', // url = base api url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 60000 // request timeout
})

request.interceptors.request.use(
  config => {
    config.headers = headers
    const { data } = config
    if (typeof data === 'undefined') {
      config.data = {}
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// respone
request.interceptors.response.use(
  response => {
    const res = response.data
    if (response.status && response.status !== 200) {
      return Promise.reject(response || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

import { getBalance } from '@/api/index.js'
jest.mock('@/utils/request', () => {
  const request = jest.fn(
    (id) =>
      new Promise((resolve, reject) => {
        resolve({ data: '100' })
      })
  )
  return request
})

describe('User', () => {
  test('getBalance', async () => {
    const balance = await getBalance(1)
    expect(balance.data).toBe('100')
  })
})