前端单元测试

川长思鸟来 2022-12-08 04:21 293阅读 0赞

创建项目：

vue init webpack 项目名

在现有项目中添加jest+vue test utils的测试环境  
1、安装依赖

npm i @vue/test-utils babel-jest jest jest-serializer-vue jest-transform-stub vue-jest -D

2、修改.babelrc中添加配置

"env": { 
       "test": { 
         "presets": ["env"]
       }
     }

3、建立测试文件目录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMjI1Nw_size_16_color_FFFFFF_t_70_pic_center]  
4、添加jest配置，在jest.conf.js中添上如下代码：

const path = require('path');
    
    module.exports = { 
        verbose: true,
        testURL: 'http://localhost/',
        rootDir: path.resolve(__dirname, '../../'),
        moduleFileExtensions: [
            'js',
            'json',
            'vue'
        ],
        moduleNameMapper: { 
            '^@\/(.*?\.?(js|vue)?|)$': '<rootDir>/src/$1',   // @路径转换，例如：@/components/Main.vue -> rootDir/src/components/Main.vue
            '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/unit/__mocks__/fileMock.js', // 模拟加载静态文件
            '\\.(css|less|scss|sass)$': '<rootDir>/test/unit/__mocks__/styleMock.js'　　// 模拟加载样式文件 
        },
        testMatch: [ //匹配测试用例的文件
            '<rootDir>/test/unit/specs/*.spec.js'
        ],
        transform: { 
            '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
            '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
        },
        testPathIgnorePatterns: [
            '<rootDir>/test/e2e'
        ],
        // setupFiles: ['<rootDir>/test/unit/setup'],
        snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
        coverageDirectory: '<rootDir>/test/unit/coverage', // 覆盖率报告的目录
        collectCoverageFrom: [ // 测试报告想要覆盖那些文件，目录，前面加！是避开这些文件
            // 'src/components/**/*.(js|vue)',
            'src/components/*.(vue)',
            '!src/main.js',
            '!src/router/index.js',
            '!**/node_modules/**'
        ]
    }

5、给测试添加上eslint配置，在.eslintrc中添加以下内容

{ 
      "env": {  
        "jest": true
      }
    }

6、在mocks开始文件下建立fileMock.js，添加以下内容，用来处理测试中遇到的静态资源

module.exports = 'test-file-stub';

7、在specs文件夹下创建文件写测试用例代码,如：example.spec.js  
8、在package.json中的scripts中添加测试命令：

"unit": "jest --config test/s -unit/jest.conf.j-coverage",

执行npm run unit 就可以启动测试了  
项目中用到了element框架，所以在写测试用例的时候，也需要给模拟的vue安装element UI

import {  mount, createLocalVue  } from '@vue/test-utils'
    const localVue = createLocalVue()
    import ElementUI from 'element-ui'
    localVue.use(ElementUI)

因为jest+vue test utils这套环境中是没有axios的，所以他不认axios，但是组件代码里面确实调用了axios，那么我们就需要模拟axios

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMjI1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/969f8839f5f94f55b3aeb0880c300ca8.png