装置

  • 应用如下命令，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