vue單元測試-Jest

vue接入單元測試Jest,配置花了點時間,相對於selenium+mocha+karma那套配置簡單多了
1.安裝vue

npm install --save-dev jest @vue/test-utils
npm install --save-dev vue-jest
npm install --save-dev babel-jest
npm install --save-dev jest-serializer-vue
2.配置babelnode

babel配置能夠寫在package.json,也能夠寫在.babelrc文件,個人項目是寫在.babelrc,而且是分環境,這裏不能直接參考網上給出的~坑就在這裏,翻閱了內外網資料,仔細看代碼才寫正確,而且因爲報錯:Unexpected Token Import for ES6 modulesgit

終於在https://github.com/facebook/j...,須要增長babel插件github

"test": {
            "presets": [
              ["env", {
                   "targets": { 
                       "node": "current" 
                    },
                    "modules": false
                }]
            ],
            "plugins": ["transform-es2015-modules-commonjs"]
          }

至此,三套環境的配置以下,官網那個配置簡單環境用用就好了,複雜環境仍是要多試試:npm

clipboard.png

3.配置package.json,增長jest的配置json

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^src/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "coverageDirectory": "<rootDir>/test/unit/coverage",
    "collectCoverageFrom": [
      "src/**/*.{js,vue}",
      "!src/index.js",
      "!src/router/index.js",
      "!**/node_modules/**"
    ]
  }
  1. 測試用例存放目錄,本身能夠寫testRegex的正則匹配存放的測試用例,匹配錯誤的控制檯會有提示:Your test suite must contain at least one test,看到這個提示就要檢查測試用例的命名是否正確的

官網默認存放目錄以下babel

clipboard.png

5.運行 npm run test ,控制檯執行結果以下app

clipboard.png

參考:單元測試

Vue Test Utils測試

Jest

相關文章
相關標籤/搜索