Vue3最佳实践第八章 ESLint 与测试 (TypeScript 中Jest与检测环境集成)

在这里插入图片描述

TypeScript 中Jest与检测环境集成

Vite 已经发布很久了现在Vue3和Vite的生态正在蓬勃发展，现在很多项目中都用到了Vite +vue3+TypeScript技术栈，进行企业级的项目开发。本文将一步步帮助你创建一个标准的Vite + Vue3 + TypeScript+Jest企业级开发与测试环境。

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
第一章 Vue3项目创建 3 Vite 创建 vue项目
第二章 Vue3 基础语法指令
第三章 Vue Router路由器的使用
第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 库 2 ( ailwind 后台框架)
第五章 Vue 组件应用 1( Props )
第五章 Vue 组件应用 2 ( Emit )
第五章 Vue 组件应用 3( Slots )
第五章 Vue 组件应用 4 ( provide 和 inject )
第五章 Vue 组件应用 5 (Vue 插件)
第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
第六章 Pinia,Vuex与axios,VueUse 2(Vuex)
第六章 Pinia,Vuex与axios,VueUse 3（VueUse）
第六章 Pinia,Vuex与axios,VueUse 4（axios）
第七章 TypeScript 上
第七章 TypeScript 中
第七章 TypeScript 下创建Trello 任务管理器
第八章 ESLint 与测试 ( ESLint )
第八章 ESLint 与测试 ( Jest )
第八章 ESLint 与测试 (TypeScript 中Jest与检测环境集成)

1 Jest 集成

我们通过上面的知识创建一个TypeScript项目，然后需要在现在项目中导入ts-jest，@types/jest的测试包。

 npm install --save-dev ts-jest @types/jest

通过下面的命令创建一个TypeScript语法的Jest测试环境。

npm init vite@latest vue-jest-ts
cd vue-jest-ts
npm install
npm install --save-dev @vue/test-utils
npm install --save-dev jest
npm install --save-dev @vue/vue3-jest
npm install --save-dev babel-jest
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev jest-environment-jsdom
npm install --save-dev @types/jest ts-jest
npm install --save-dev @babel/preset-typescript

集成babel组件与jest组件到Vue项目编辑环境中，在项目中根目录中创建jest.config.cjs文件与.babelrc 文件。

(项目)
├── src
│   ├── App.vue            //vue组件（需要测试）
│   ├── main.ts            //vue配置文件
│   └── tests 
│       └── test.spec.ts   //测试文件
├── package.json           //项目配置文件
├── jest.config.cjs        //jest测试配置文件
├── .babelrc               //babel解析配置文件

jest.config.cjs文件

在文件中加入"^.+\.ts$": “ts-jest” ts文件的解析组件，moduleFileExtensions中设置测试解析文件后缀名称。

module.exports = {
    testEnvironment: 'jsdom',
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"],
     },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$',
    moduleFileExtensions: ['vue', 'js', 'ts'],
      transform: {
        "^.+\\.jsx?$": "babel-jest",
        '^.+\\.vue$' : '@vue/vue3-jest' , 
        "^.+\\.ts$": "ts-jest"
      },
   };

.babelrc 文件

{ 
    "presets" : [ 
     [ "@babel/preset-env" ]
      ]
}

package.json 文件

在package.json文件中的scripts属性中加入"test":“jest” 测试命令。

  "scripts": {
    "test":"jest"
  },

App.vue

将App.vue文件中的自动生产的内容修改成下面的代码内容。

<script setup lang="ts">
let name:string="大家好";
</script>
<template>
 <h1> {{name}}</h1>
</template>
<style scoped>
</style>

test.spec.ts 测试文件

在src目录中创建一个test测试目录，在test目中创建一个test.spec.ts 测试文件，我将在est.spec.ts 文件写入车上代码测试TypeScript+jest环境是否集成成功。

import { mount } from '@vue/test-utils';
import app from '../App.vue';
test("测试 Vue3 Component",function(){
  const wrapper = mount(app);
  console.log(wrapper.text())
})

这个时候会出现一个问题，如果测试文件结尾是 js的测试文件，运行测试可以正常运行。但是如果是ts结尾的测试文件会出现错误找不到vue组件。

需要在vite-env.d.ts 文件中加入如下内容。

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

运行命令，测试通过说明我们的环境配置成功。

npm run test
> vue-jest-ts1@0.0.0 test
> jest
  console.log
    大家好
      at Object.<anonymous> (src/test/test.spec.ts:5:11)
 PASS  src/test/test.spec.ts (5.444 s)
  √ 测试 Vue3 Component (61 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

2 Eslint 检测集成

在真实的项目中不仅要有Jest 测试环境，同时也需要有代码质量检测环境。在项目中加入eslint代码检测功能使用 @eslint/config命令来创建和导入typescript 需要的检测包，如果有不熟悉的地方可以看参考上面ESLint 中TypeSript设置的内容进行配置与导入。

npm install eslint --save-dev
npm install eslint-plugin-vue --save-dev
npm init @eslint/config
也可以直接导入环境包
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue

在跟目录中创建.eslintrc.cjs文件，用于配置eslint检测与项目的集成。注意在vite项目中的配置文件结尾都是cjs结尾。

(项目)
├── src
│   ├── App.vue            //vue组件（需要测试）
│   ├── main.ts            //vue配置文件
│   └── tests 
│       └── test.spec.ts   //测试文件
├── package.json           //项目配置文件
├── jest.config.cjs        //jest测试配置文件
├── .babelrc               //babel解析配置文件
├── .eslintrc.cjs          //eslint语法检测配置文件

.eslintrc.cjs

在.eslintrc.cjs中配置

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
    ],
    "overrides": [
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

package.json 文件

在package.json 文件中加入检测命令。

"lint": "eslint --ext .js,.vue,.ts src"

3 Prettier 格式检测集成

导入Prettier 组件到项目中，prettier使用方法查看上面的Prettier中的内容。

npm install prettier --save-dev 
npm install @vue/eslint-config-prettier eslint-plugin-prettier --save-dev

在.eslintrc.cjs中，extends属性中加入“@vue/prettier”格式化组件。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        "@vue/prettier"
    ],
    "overrides": [
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

项目根目录中创建 .prettierrc文件，用于Prettier检测格式规则设置。

(项目)
├── src
│   ├── App.vue            //vue组件（需要测试）
│   ├── main.ts            //vue配置文件
│   └── tests 
│       └── test.spec.ts   //测试文件
├── package.json           //项目配置文件
├── jest.config.cjs        //jest测试配置文件
├── .babelrc               //babel解析配置文件
├── .eslintrc.cjs          //eslint语法检测配置文件
├── .prettierrc            //Prettier格式检测配置文件

.prettierrc文件

在.prettierrc文件中设置vue项目中最长用到的格式规则。

{
    #换行的长度
    "printWidth": 120,
    #指定缩进的空格数
    "tabWidth": 2,
    #用单引号括起来
    "singleQuote": false,
    # 设置尾随逗号
    "trailingComma": none,
    # 在语句末尾设置分号
    "semi": true,
    # 为Vue的脚本和样式标签指定缩进
    "vueIndentScriptAndStyle": true
}

package.json 设置

在package.json文件中加入prettier命令，可以单独使用格式检测修复而不用和eslint指令一起执行，效果和–fix命令效果一样。

  "scripts": {
    ......
    "lint": "eslint --ext .js,.vue,.ts src",
    "format": "prettier -w src/**/*.{ts,vue}",
    "test": "jest"
  },

作为解决方案，我们需要设置

npm install --save-dev jest-environment-jsdom
npm install --save-dev @vue/babel-preset-app or @vue/cli-plugin-babel

jest-environment-jsdom 是一个 Jest 测试环境，它使用 jsdom 模拟浏览器环境，使得可以在 Jest 中运行浏览器 API 和 DOM API。

jest.config.cjs
module.exports = {
    testEnvironment: 'jsdom',
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"],
     },
    moduleFileExtensions: [
        "js",
        "json",
        "vue"
      ],
      transform: {
        ".*\\.(vue)$": "@vue/vue3-jest",
        '^.+\\.js$'  : 'babel-jest',
      }
  }
jest.config.cjs
module.exports = {
    presets: [
      [
        '@vue/app',
        {
          useBuiltIns: 'entry'
        }
      ],
    ],
  };

import { mount } from '@vue/test-utils';
import { zht } from '../components/zht';
const App = {
  template:`
  <div>Hello World</div>
  `
}
test("test App Component",function(){
  const wrapper = mount(App);
  console.log(wrapper.text())
  expect(8 + 2).toBe(zht());
})