阅读 802

【笔记】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

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

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.jsonscript 里添加命令再执行 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
复制代码

文章分类
阅读
文章标签