vue项目中增加Jest测试功能

Posted 2021-09-07 _____

安装

• 使用如下命令，vue会自动创建好配置和依赖

  vue add @vue/unit-jest

• 手动配置
  1.安装 Jest 和 Vue Test Utils
  npm install --save-dev jest @vue/test-utils
  2.安装 babel-jest 、 vue-jest 和 7.0.0-bridge.0 版本的 babel-core
  npm install --save-dev babel-jest vue-jest babel-core@7.0.0-bridge.0
  3.安装 jest-serializer-vue
  npm install --save-dev jest-serializer-vue

配置 Jest

Jest 的配置可以在 package.json 里配置；也可以新建一个文件 jest.config.js， 放在项目根目录即可。这里我选择的是配置在 jest.config.js 中：
配置说明

module.exports = {
    // 告诉jest需要解析的文件
    moduleFileExtensions: [
        \'js\',
        \'jsx\',
        \'json\',
        \'vue\'
    ],
    // 告诉jest去哪里找模块资源，同webpack中的modules
    moduleDirectories: [
        \'src\',
        \'node_modules\'
    ],
    // 告诉jest针对不同类型的文件如何转义
    transform: {
        \'^.+\\\\.(vue)$\': \'<rootDir>/node_modules/vue-jest\',
        \'^.+\\\\.js$\': \'<rootDir>/node_modules/babel-jest\',
        \'.+\\\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$\': \'jest-transform-stub\',
        \'^.+\\\\.jsx?$\': \'babel-jest\',
        \'^.+\\\\.ts?$\': \'ts-jest\'
    },
    // 告诉jest在编辑的过程中可以忽略哪些文件，默认为node_modules下的所有文件
    transformIgnorePatterns: [
        \'<rootDir>/node_modules/\'
        + \'(?!(vue-awesome|veui|resize-detector|froala-editor|echarts|html2canvas|jspdf))\'
    ],
    // 别名，同webpack中的alias
    moduleNameMapper: {
        \'^src(.*)$\': \'<rootDir>/src/$1\',
        \'^@/(.*)$\': \'<rootDir>/src/$1\',
        \'^block(.*)$\': \'<rootDir>/src/components/block/$1\',
        \'^toolkit(.*)$\': \'<rootDir>/src/components/toolkit/$1\'
    },
    snapshotSerializers: [
        \'jest-serializer-vue\'
    ],
    // 告诉jest去哪里找我们编写的测试文件
    testMatch: [
        // \'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)\'
        \'**/tests/unit/**/Test.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)\'
    ],
    // 在执行测试用例之前需要先执行的文件
    setupFiles: [\'jest-canvas-mock\']
};

各配置项说明：

其中需要注意的一点是，因为项目中用到了 veui，node_modules 中引用的是源码，未经过 babel 转义。因此需要在 transformIgnorePatterns 中告诉jest，需要对其进行编译。其他引入的第三方库同理。

配置 package.json

写一个执行测试的命令脚本：

{
    "script": {
        "test:unit": "vue-cli-service test:unit"
    }
}

---

Vue Test Utils