前端单元测试部署和使用

随着前端越来越向模块化发展，单元测试对于前端开发来说也越来越重要。废话不多说，直奔主题：

1、前端单元测试框架有很多，我主要用的是jest框架。选择这个框架原因是因为一下几点：

　　a、该框架已经集成断言库，不需要我们再额外安装第三方的断言库，很方便。

　　b、安装配置简单，非常容易上手，几乎是零配置的，通过npm 命令安装就可以直接运行了

　　c、Jest 的测试用例是并行执行的，而且只执行发生改变的文件所对应的测试，提升了测试速度

通过npm或者yarn安装jest和babel-jest，这里jest的版本建议安装26一下的，我安装的是25.5.4，可以避免一些因为升级带来的问题。

安装命令：

yarn add jest @25.5.4

　　安装好之后，在package.json的scripts里面增加一个命令：test： 'jest'，如图：

 然后在package.json的同级目录下新增一个jest.config.js,内容如下：

 

module.exports = {
  testMatch: ["<rootDir>/src/tests/**/*.(spec|test).js?(x)"],
  transform: {
    // 将.js后缀的文件使用babel-jest处理
    "^.+\\.js$": "babel-jest"
  },
  // 下面非要从重要, 将不忽略 lodash-es, other-es-lib 这些es库, 从而使babel-jest去处理它们
  transformIgnorePatterns: ["<rootDir>/node_modules/(?!(lodash-es|other-es-lib))"]
};

　　

在对应的src目录下新建tests目录，在该目录中新建测试用例文件，格式为xxx.test.js或者xxx.spec.js。

关于一些断言方法或者更多关于jest的内容，可以访问传送门：https://jestjs.io/

 如果你的项目使用到了ES6语法的话，还要在.babelrc文件中作如下修改：（我直接贴代码）

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs",
    "@babel/plugin-proposal-class-properties"
  ],
  "env": {
    "development":{
      "plugins": ["dynamic-import-node"]
    }
  }
}

　　如果缺少对应的模块记得安装好，否则运行npm run test的时候会报错