---
title: '單元測試'
util: jest
---

[TOC]

## 工具規格

1. vue3 官方單元測試套件 - Vue Test Utils
2. 單元測試工具包 -Jest

## 所需安裝的套件

1. jest -> 單元測試工具
2. @vue/vue3-jest      -> 轉換vue檔用
3. @vue/test-utils@next -> vue官方提供的的單元測試用mount()
4. @babel/preset-env -> es6 支援到es5 轉換用(javascript)
5. jest-environment-jsdom ->  jest 28版本後不再是預設, 需安裝
6. ts-jest  -> 轉換ts/tsx用
7. babel-jest -> 轉換js用

## 檔案結構

1. 在components 新增一個__tests__ , 檔案名稱為   某name.test.ts
2. 在hook 新增一個__test__ , 檔案名稱為 某name.test.ts

---

> 以上請透過yarn add 安裝 , 記得加上--save-dev

> Jest 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性。

程式端
---

// 需要在 package.json 中定义一个单元测试的脚本。

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

// 在 package.json 中创建一个 jest 块：

  "jest": {
    "preset": "ts-jest",
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "testEnvironment": "jsdom",
    "moduleFileExtensions": [
      "js",
      "json",
      "vue",
      "ts"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "@vue/vue3-jest",
      "^.+\\.(ts|tsx)$": "ts-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  },

// 新增一個babel.config.json 作為轉換javascript es5 es6 相容用

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ]
}

> 以上參考自: https://v1.test-utils.vuejs.org/zh/

功能教學
---

第一步:  const wrapper = mount(Foo)
第二步:  expect(wrapper.classes('bar')).toBe(true)

* 此wrapper為一個包裹器, 底下有許多方法可以使用
* 此expect 用此便于检查已存在的元素

## 測試執行序

:::info
* describe(執行說明可執行多筆test, Fn, timeout)
* test(執行說明文字, Fn, timeout)
* it(執行說明文字, Fn, timeout)
:::

###### tags: `Templates` `Documentation`