vue2

为VUE2工程添加JEST单元测试

现有一vue2工程(vue初始化工程,仅有HelloWorld.vue)，需要给它添加jest单元测试

添加unit-jest

使用命令

1
vue add unit-jest

给已有的工程添加单元测试

测试

可以观察到命令执行完成后

  1. 会在src/tests/unit产生一个example.spec.js的文件,这个是测试HelloWorld.vue这个单VUE组件的
  2. package.json的devDependencies中会添加涉及vue jest的依赖，scripts中会添加一个新的test:unit的命令

使用

1
npm run test:unit

就可以单测HelloWorld.vue，这个组件

部分特殊处理

针对webpack路径别名的配置

经过我的实测，jest单测是支持@路径别名的(得益于node_modules\@vue\cli-service\lib\config\base.js)
但是针对其他的别名，jest就不怎么支持了，需要我们自行配置。例如:

vue.config.js中配置了如下别名:

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("public", resolve("public"));
  },
}

那么在jest.config.js中需要配置moduleNameMapper

1
2
3
4
5
6
7
module.exports = {
  moduleNameMapper: {
    "^assets(.*)$": "<rootDir>/src/assets$1",
    "^components(.*)$": "<rootDir>/src/components$1",
    "^public(.*)$": "<rootDir>/public$1"
  }
}

针对引入的样式文件与css模块

根据vue-test-utils官网介绍，当运行在jsdom上时，只能探测到内联样式

我们有以下组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div class="msg" style="color:green;">
    {{msg}}
  </div>
</template>

<script>
import '@/src/css/style-msg.css'
export default {
  name: 'StyleMsg',
  props: {
    msg:{
      type:String,
      default:''
    }
  }
}
</script>

当单元测试的组件中有引入的css样式时，可以这么做忽略样式配置

这么做是模拟了css的处理，本质还是没有引入样式

参考:

使用 webpack