vue项目中增加Jest测试功能

_____

安装

  • 使用如下命令,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/cli-plugin-unit-mocha: 使用 Mocha 进行单元/集成测试的插件
  • @vue/test-utils: 单元/集成测试的工具库
  • chai: 断言库 Chai

从现在开始,单元/集成测试文件可以使用*.spec.js 后缀写在 tests/unit 目录中。测试的目录不是硬连线的,你可以用下面的命令修改它:

vue-cli-service test:unit --recursive 'src/**/*.spec.js'

recursive 参数告诉测试运行器依据后面的通配符模式来搜索测试文件。

shallowMountmount

  • shallowMountmount这俩个方法都会渲染组件,但是shallowMount不会渲染子组件(子组件元素将是空元素)。
  • 我们可以使用find选择器在渲染的 DOM 中搜索并获取他的HTML、文本、类名或原生 DOM 元素。如果搜索的是一个可能不存在的片段,我们可以使用 exists 方法判断他是否存在。
测试需引入 vue

Vue Test Utils

阅读 313
52 声望
0 粉丝
0 条评论
你知道吗?

52 声望
0 粉丝
宣传栏