今天遇到一件很奇葩的事情

輸入npm run build-test 突然停在這不動了 what? 不動了？！

後來google了一下 大家都是人才

執行一下這句話 就動了！！

npm config set registry http://registry.cnpmjs.org

補充知識：vue_test_unit_e2e常見問題npm run unit單元測試和npm run e2e整合測試問題

vue專案要進行unit和e2e常見問題

localStorage is not available for opaque origins

console.error node_modules\vue\dist\vue.runtime.common.dev.js

通常根據vue init webpack myproject 生成的專案，選擇了unit和e2e模組後，都會有些問題。

1.首先是unit，當我們執行npm run unit時，會出現以下問題：

SecurityError: localStorage is not available for opaque origins

因為說是jest執行是node環境，所以沒有localStorage。

解決辦法：

在專案內test/unit/jest.conf.js檔案中

加入以下3句：即可

testEnvironment: 'jsdom',verbose: true,testURL: 'http://localhost'

2.然後，如果你也使用了elementui模組， 也會報錯以下：

console.error node_modules\vue\dist\vue.runtime.common.dev.js:621

[Vue warn]: Unknown custom element: <el-table> - did you register the component correctly? For recursive components,make sure to provide the "name" option.

因為說是elementui的元件沒有註冊。

解決辦法：

修改專案裡面test/unit/setup.js檔案，內容為以下：

import Vue from 'vue'
// 將Vue暴露到全局裡面
global.Vue = Vue;
console.log('--global:',global.hasOwnProperty('Vue'))
Vue.config.productionTip = false

// 使用elementui元件
import ElementUI from 'element-ui';
// npm run unit 時要下面引入樣式那句註釋掉-不知為什麼匯入會報錯。可能因為測試時，不需要css樣式
// import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

專案demo原始碼在這：https://github.com/banana618859/vue_test_unit_e2e

拷貝下來後，npm i 然後npm run unit 或 npm run e2e即可

提醒

因為$mount處理不了使用者互動，所以我們要用到vue官方推薦的@vue/test-utils安裝一下，就可以在專案中使用了。

npm i @vue/test-utils -D

使用：在專案裡 test/unit/spec/HelloWorld.spec.js檔案中，

import HelloWorld from '@/components/HelloWorld.vue'
import { mount } from '@vue/test-utils'
describe('測試用helloworld元件',() => {
 it('測試點選後，msg的改變',() => {
   //點選一下
   let wrapper = mount(HelloWorld) // 用@vue/test-utils的mount載入元件
   wrapper.vm.newData = 1;
   wrapper.find('.btn').trigger('click') //觸發按鈕點選事件
   expect( wrapper.vm.msg ).toBe('test_if')
  })
})

以上這篇解決vue打包 npm run build-test突然不動了的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。