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

1. 安裝 vue/test-utils

npm install --save-dev jest @vue/test-utils
npm install --save-dev vue-jest

2. 在 package.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`

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')

     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() > 這是一連串的動作行為

const options = wrapper.find('select').findAll('option') //找到option 的節點
      options.at(4).setSelected() // 選擇第四個節點

- setChecked > 注意這邊我是使用checkbox才成功的

<input v-model="accept" type="checkbox">

const radioInput = wrapper.find('input').setChecked() > 預設為true
wrapper.vm.Changeaccept() > 這是我在vue中寫的function，目的為改變checkbox的狀態

- 因為是js故也可以

    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)