---
# System prepended metadata

title: JEST（For Vue）
tags: [Coding]

---

# JEST（For Vue）
###### tags:  `Coding`

1. 安裝 vue/test-utils
```Javascript 
npm install --save-dev jest @vue/test-utils
npm install --save-dev vue-jest
```
2. 在 package.json 加上
``` json
"scripts": {
    "test": "jest"
},
"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // 告訴 JEST 處理 *.vue 資料（放進package.json要刪掉這行）
      "vue"
    ],
    "transform": {
      // 用 `vue-jest` 處理 `*.vue` 文件（放進package.json要刪掉這行）
      ".*\\.(vue)$": "vue-jest",
      // 用 `babel-jest` 處理 js（放進package.json要刪掉這行）
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "moduleNameMapper": {
    // 支持程式中相同的 `@` -> `src` 别名（放進package.json要刪掉這行）
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    //加上這兩行的概念是對整個專案做掃描（放進package.json要刪掉這行）
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"],
    //測試報告
    "coverageReporters": ["html", "text-summary"]
}
```
3. 在Vue的那個資料夾，增加一個 `${vue檔名}.test.js`
```javascript=
import { shallowMount } from '@vue/test-utils'
// 上面那行是必要
import ParentComponent from './HelloWorld'
// 上面那行是>輸入你的組件
import child from './child'
// 上面那行是意指import 子 component
describe('Counter', () => {
  const wrapper = shallowMount(ParentComponent)
  // 上面那行是>掛載component
  const wrapper1 = shallowMount(child)
  // 上面那行是>掛載子component
  it('renders the correct markup', () => {
    //上面那行是>敘述式
    wrapper.vm.increment()
    //上面那行代表說 > 使用vue 的 methods(行為命令敘述)
    expect(wrapper.vm.count).toBe(1)
    // 上面那行代表說 > 預期count的變數為多少(預期得到敘述)
  })
})
```
4. 在test.js中 可以把 wrapper.vm 看成 this

6. 行為命令敘述
- wrapper.vm.increment() > 直接操作vue的methods

- wrapper.find('button.CountAdd') > 找到button的Class 為 CountAdd的按鈕
    - 然後要trigger(觸發這個button)
    - 要下 button.trigger('click')
    ```javescript
     const button = wrapper.find('button.CountAdd')
        button.trigger('click')
    ```
- wrapper.setData({ count: 10 }) > 將vue 內的 data 的 count 值設定為 10
- wrapper.setProps({ foo: 'bar' }) > 將 vue 內的 props 的 foo 設定為 'bar'
- setSelected() > 這是一連串的動作行為
```javascript=
const options = wrapper.find('select').findAll('option') //找到option 的節點
      options.at(4).setSelected() // 選擇第四個節點

```
- setChecked > 注意這邊我是使用checkbox才成功的
```htmlmixed=
<input v-model="accept" type="checkbox">
```
```javascript=
const radioInput = wrapper.find('input').setChecked() > 預設為true
wrapper.vm.Changeaccept() > 這是我在vue中寫的function，目的為改變checkbox的狀態
```
- 因為是js故也可以
```javascript=
    wrapper.vm.increment()
    for(let i = 1; i< 10;i++){
      wrapper.vm.decreasement()
    }
```
6. 預期得到敘述：==公式==
- **expect(主詞).動詞(受詞)**
    - ++先決條件，如果在 template 內的第一個tag ，放上 v-if="false"，所有測試將無法繼續進行++
     
    - 主詞
        - wrapper.vm.count > 直接取得vue中的data(意即this.count)

        - wrapper.find('div') > 找到 div 這個元素
        - wrapper.findAll('div') > 找到所有tag為 div 的元素
            - 可加後綴：wrapper.findAll('div').at(0)
        - wrapper.html() > 為測試「template」內的所有tag長怎樣
        - wrapper.is('div') > 測試所選到的tag是否為div
        - wrapper.isEmpty() > 為測試「template 內的 div 內」 是否有tag
        - wrapper.find('???').isVisible() > 主要測試是否可見
            - 測 v-show / display:none / visibility:hidden
            - wrapper.findAll('???') > 建議加上 at(0)：不然是 「or閘」
        - wrapper.name() > 測試component 的名字是否為()內的字串
        - wrapper.find(child).exists() > 找到子component,並驗證是否存在
    - 動詞 
        - toBe > 是否等於
        - toContain > 是否包含
    - 受詞
        - Number > .toBe(1)
        - String > .toBe('String')
        - Boolean > .toBe(true)