vue+jest配置 - Githubissues

为了保证代码的健壮性，测试必不可少，本文基于vue+jest构建一个单元测试的环境

jest安装

安装以下依赖

@vue/cli-plugin-unit-jest

@vue/test-utils

babel-jest

babel-core

npm i -D @vue/cli-plugin-unit-jest @vue/test-utils babel-jest babel-core

保证安装了 babel-core 这个依赖

并保证它的版本号大于 7.0.0-bridge.0

否则会报识别不了import关键字的错误(原因是由于jest是通过node启动的，而import不是commonjs里的关键字)

添加script脚本

"scripts": {
    ...
    "test": "vue-cli-service test:unit --coverage",
    ...
  },

jest配置

添加如下jest.config.js文件

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
}

switch组件

编写我们需要测试的组件

<!--自定义的开关 -->
<template>
  <div
    class="wheat-switch"
    :style="{'background': (status? '#4dd865' : '#E5E5E5')}"
    @click="handleSwitchStatus"
  >
    <div class="wheat-switch-inner" :style="{'margin-left': (status ? '0.42rem' : '0.02rem')}"></div>
  </div>
</template>

<script>
export default {
  props: {
    status: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    handleSwitchStatus() {
      const newStatus = !this.status;
      this.$emit("switchStatus", newStatus);
    }
  }
};
</script>

switch测试文件

在这个文件中，我们需要测试它的props参数以及自定义事件

import { mount } from '@vue/test-utils'
import Switch from '@/components/Switch/src/Switch.vue'

describe('Switch.vue', () => {
  it('renders props.status = true when passed', () => {
    const status = true;
    const wrapper = mount(Switch, {
      propsData: { status }
    })
    expect(wrapper.find('.wheat-switch').attributes('style')).toMatch('background', '#4dd865');
    expect(wrapper.find('.wheat-switch-inner').attributes('style')).toMatch('margin-left', '0.42rem');
  });

  it('renders props.status = false when passed', () => {
    const status = false;
    const wrapper = mount(Switch, {
      propsData: { status }
    })
    expect(wrapper.find('.wheat-switch').attributes('style')).toMatch('background', '#E5E5E5');
    expect(wrapper.find('.wheat-switch-inner').attributes('style')).toMatch('margin-left', '0.02rem');
  });

  it('test change status from false to true', () => {
    let status = false;
    const stub = jest.fn();
    const wrapper = mount(Switch, {
      propsData: { status }
    });
    wrapper.vm.$on('switchStatus', stub);
    wrapper.find('.wheat-switch').trigger('click');

    expect(stub).toBeCalledWith(true);
  });
})

执行测试

npm run test

louzhedong / blog