jest测试vue+element

具体看去参看官网

• vue-test-utils
  https://vue-test-utils.vuejs.org/zh/guides/#%E9%85%8D%E5%90%88-vue-router-%E4%BD%BF%E7%94%A8
• https://jestjs.io/docs/zh-Hans/getting-started

jest.conf.js

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname, '../../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    "\\.(css|less)$": "identity-obj-proxy"
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
    ".+\\.css$": "jest-transform-stub"
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e'
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/util/*.js',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ],
  testURL: "http://localhost"
}

如何引入element不报错

import {mount,createLocalVue} from '@vue/test-utils'
import Login from '@/components/user/login.vue'
// import Forget from '@/components/user/forget.vue'
import axios from 'axios'
import ElementUI from 'element-ui';
import store from '@/util/store'
import VueRouter from 'vue-router'

// 创建临时Vue实例，挂载组件中使用的插件
const localVue = createLocalVue()
localVue.use(ElementUI)
localVue.use(VueRouter)
const router = new VueRouter()

// mock掉整个axios模块
// 返回值在使用的时候自定义
jest.mock('axios')
localVue.prototype.$axios = axios // 挂载axios


describe('Login', () => {
    let wrapper = mount(Login,{
        localVue,
        store,
        router
    })
    beforeEach(() => {
        axios.mockClear()
    })
  
    it('renders the correct markup', () => {
        console.log(wrapper)
        expect(wrapper.html()).toContain('忘记密码')
    })
  
  })
 

其他附录

配置jest

在你的项目中，jest的配置可以在定义在package.json文件中，或者通过一个jest.config.js或jest.config.ts

文件或通过–config <path/to/file.js|ts|json>选项。如果你喜欢使用你的package.json去存储jest的配置，这个jest的key必须在pack的顶级，这样jest才能知道如何找到你的配置。

package.json

{
  "name": "my-project",
  "jest": {
    "verbose": true
  }
}

或者通过jest.config.js

// Sync object 同步对象
module.exports = {
  verbose: true,
};

// Or async function 或异步函数
module.exports = async () => {
  return {
    verbose: true,
  };
};

记住：最后拿到的配置必须是可被json序列化的。

使用–config配置是，如果jest的配置文件是json文件，那么json文件不能用有jest的key.这个和package.json不同。

{
  "bail": 1,
  "verbose": true
}

配置选项

1. verbose 详细输出信息

 verbose: true

2. rootDir

Note that using '<rootDir>' as a string token in any other path-based config settings will refer back to this value. So, for example, if you want your setupFiles config entry to point at the env-setup.js file at the root of your project, you could set its value to ["<rootDir>/env-setup.js"].

默认： 包含你jest配置的目录的根目录或者package.json或者没有package.json时使用pwd当前路径。jest应该扫描测试用例和模块在这个rootDir下。如果你将jest的配置放在package.json中，并且想要跟目录是你项目的根，那么这个配置参数的值默认是package.json的所在目录。

通常，你会希望在设置其为‘src’或‘lib’，与你存储源代码的目录一致。

提示： 在其他任何基于路径的配置中使用“” 作为一个字符串标志的配置中将会引用该值。

jest.config.js

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

3. moduleNameMapper

默认值：null

从正则表达式到模块名或到模块名的数组形式的映射。

默认那些具有别名的模块是不可被mock的，无论是否启用了自动mock。

如果你想要使用文件路径，使用“” 字符串标志去引用rootDir的值。

另外，你可以使用被编号的反向引用去代替被捕获型正则分组。

moduleNameMapper [object<string, string | array<string>>]

code

{
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

解释下：其实就是像webpack那样，js文件可以使用@符号代替根目录。根目录则是rootDir中定义了。而（.*）是正则中的捕获分组。$1表示这个捕获分组。匹配的对象是字符串。

所有test文件可以这样写：

sum.test.js

import total from '@/sum'

这样写就很方面。当然import语法，需要配置babel，这是前提。

4. transform

transform [object<string, pathToTransformer | [pathToTransformer, object]>]
// Default: {"\\.[jt]sx?$": "babel-jest"} 默认配置

transform是一个从正则表达式到路径到转换器的映射。一个转换器是一个模块，它提供一个同步函数为转换中的源文件。例如，如果希望在你的模块或你的测试中使用一种未被node支持的语言新特性。你可以插入一个编译器，它可以编译新版本的javascript到当前版本。比方说typescript等。

通常我们是让他支持es6以后的语法。可以参看官网，使用babelrc配置。就算使用转换器，也必须使用babelrc，原因继续看。

但是必须装"@babel/core"， “@babel/preset-env”，“babel-jest”

注意1：一个转换器对每个文件只运行一次，除非文件内容改变。在一个转换器（不是你调用别人的转换器，是自己开发的）的开发过程中，可以使用–no-cache去删除jest的缓存。

注意2：如果你添加了自定义transform转换器，那么这个默认配置就会被覆盖，并且babel-jest不会被自动加载。如果你想要编译javascript新语法，或者typescript，那么必须在配置文件里面亲自写{"\\.[jt]sx?$": "babel-jest"},这样才能转换es6等新语法。

 transform: {
    "\\.js$": "babel-jest" //为什么默认是这样的，还要自己写呢？因为你可能还会定义其他转换器。比如vue的转换器。
  },

5. testPathIgnorePatterns

testPathIgnorePatterns [array<string>]
//默认值︰["node_modules"]

These pattern strings match against the full path. Use the <rootDir> string token to include the path to your project’s root directory to prevent it from accidentally ignoring all of your files in different environments that may have different root directories. Example: ["<rootDir>/build/", "<rootDir>/node_modules/"].

一个数组，每个元素可以是正则表达式形式，他们可以在执行所有测试用例之前匹配所有测试路径。如果测试这个测试路径匹配所有模式，那么它会被跳过。这些模式匹配完整路径。使用<rootDir>字符串标识可以包含你项目的根路径，这样就能防止在你不同的环境（这些环境根目录不同）下意外的忽略了所有文件。

通俗点就是忽略跳过某些目录，这些目录不是单元测试的。比如都是在test目录下，e2e文件夹是端到端的测试用例，和jest无关。

testPathIgnorePatterns: [
    '<rootDir>/test/e2e'
]

6. coverageDirectory

这个不用解释了，就是测试报告生成的目录位置

coverageDirectory: '<rootDir>/test/unit/coverage'

7. setupFiles

setupFiles [array]
//默认值：[]

一个列表，它保存那些运行一些代码去配置或搭建测试环境的模块的路径。每个setupFIle将会为每个测试文件运行一次。因为每个测试都是在他们独立运行，这些脚本将会在这些测试环境的测试用例之前立即执行。

值得注意的是setupFiles将会在setupFilesAfterEnv之前执行。

其实这个配置项主要配置是：有些js文件在用例之前运行，并且这些脚本是专门用来设置环境相关的。那么setupFilesAfterEnv是干啥的呢？

 setupFiles: ['<rootDir>/test/unit/setup'],

8. setupFilesAfterEnv

setupFilesAfterEnv [array]

setupFilesAfterEnv在测试套件里面的测试用例运行之前，运行一些代码来配置或设置测试框架。因为setupFiles执行是在那么安装在环境中的测试框架之前，这个脚本文件会提供给你一个机会，在环境安装测试框架之后运行一些代码。

如果你想要一条相对于你项目的根目录的路径，请使用<rootDir>在你的路径字符串中，如：<rootDir>/a-configs-folder

注意 setupTestFrameworkScriptFile被弃用，请使用setupFilesAfterEnv

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
};

实例中的jest.setup.js如下

jest.setTimeout(10000); // in milliseconds

9. collectCoverage

默认是false

指出是否收集测试时的覆盖率信息。 由于要带上覆盖率搜集语句重新访问所有执行过的文件，这可能会让你的测试执行速度被明显减慢。

10. collectCoverageFrom

默认值：undefined

一个全局匹配模式，指明一组文件，那么些文件需要收集代码覆盖率的。如果一个文件与指定的模式相匹配，那么几遍该文件不存在测试，并且在测试套件中也不需要他，但是他的覆盖率信息也会被收集。

collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]

简单的说，就是定位收集覆盖率文件的范围的。

11. moduleFileExtensions

moduleFileExtensions [数组<string>]
//默认值：["js"、"json"、"jsx"、"node"]

moduleFileExtensions是一个数组，里面存储文件的扩展名（即后缀）。如果你在引入模块时，没有指定文件扩展名，这些在moduleFileExtensions数组中的扩展名就会被识别搜索，从左到右。