【笔记】Vite 2.0 + Vue 3.0 + Test Unit 配置

配置库支持

需要如下库支持

• jest jest 的核心
• babel-jest .js/.jsx/.tsx 文件支持需要
• @babel/core babel-jest 依赖，babel 核心
• ts-jest .ts 文件支持需要
• @types/jest TS 类型支持
• vue-jest@next .vue 文件支持需要
• @vue/test-utils@next .spec/.test 渲染 components 以及 vue 运行支持需要
• @babel/preset-env jest 不支持 ES6/ESM 模块规则，用以支持转换
• @testing-library/jest-dom 支持断言 DOM 的状态以及 class 等相关内容

依赖说明以及相关文档

注意： 如果未安装 @babel/preset-env 和配置 babel.config.js 那么大概率会出现报错

由于 Jest 运行在 Node 环境 中，所以并不支持 import 这个来自 ESM 的关键字，所以就需要 @babel/preset-env ，文档 jest/using-babel

• babel-jest 依赖于 @babel/core ，文档 facebook/jest
• ts-jst 类型支持依赖于 @types/jest ，文档 kulshekhar/ts-jest
• vue-jest@next & @vue/test-utils@next ，文档 vuejs/vue-test-utils-next

仅有依赖关系的话，那么就可以一次就安装完它们

npm install --save-dev @babel/core @babel/preset-env @types/jest @testing-library/jest-dom @vue/test-utils@next vue-jest@next babel-jest ts-jest jest 

注意添加 babel.config.js 文件并写入如下内容

module.exports = {
  presets: ["@babel/preset-env"],
};

Jest 初始化

jest 部分也比较简单，可以使用 npx 初始化

npx jest --init

也可以在 package.json 的 script 里添加命令再执行 npm run jest:init

"scripts": {
  "jest:init": "jest --init"
}

还可以手动创建 jest.config.js 文件，添加如下内容

module.exports = {
  coverageProvider: "v8",
  globals: {
    "vue-jest": {
      babelConfig: false,
      tsConfig: {
        importHelpers: true,
      },
    },
  },
  moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.ts$": "ts-jest",
    "^.+\\.js$": "babel-jest",
    "^.+\\.[jt]sx?$": "babel-jest"
  },
};

完成以上步骤之后就可以在 package.json 添加 jest 运行命令了

"scripts": {
  "jest:unit": "jest"
}

项目根目录下创建如下文件夹结构

test
 └─ unit
     ├─ specs
     └─ use-cases

新建 test/unit/specs/hello.spec.js 文件并写入如下内容

import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
}

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world')
})

执行如下命令，如无意外将会得到测试结果

npm run jest:unit