vue+vuex+leaflet Jest單測踩坑指南

cqq626發表於2018-11-25
Vue

環境

  • Vue CLI 3
  • TypeScript 3.1.4
  • Leaflet 1.3.4

相關文件

vue-test-utils.vuejs.org/zh/guides/#…

踩坑

1、iview按需引入報錯：Typescript Error : 'XXX' only refers to a type, but is being used as a value here

原因：iview預設的宣告檔案只宣告瞭型別，不能當變數用於Vue全域性元件註冊語句中

Vue.component('Tabs', Tabs);
複製程式碼

解決：定義自己的ts宣告檔案：github.com/iview/iview…

import { Tabs, TabPane } from 'iview';

declare module 'iview/dist/types/tabs' {
    export const Tabs: Tabs;
    export const TabPane: TabPane;
}
複製程式碼

2.leaflet報錯："TypeError: Cannot read property '_layerAdd' of null"

原因：leaflet在map上新增圖層時會將圖層繪製在對應的renderer上，預設是svg；但jest預設在jsdom中執行測試，leaflet建立svg renderer時會判斷當前環境是否支援svg：

function svgCreate(name) {
    return document.createElementNS('http://www.w3.org/2000/svg', name);
}
var svg = !!(document.createElementNS && svgCreate('svg').createSVGRect);
var vml = !svg && (function () {
    try {
    	var div = document.createElement('div');
    	div.innerHTML = '<v:shape adj="1"/>';
    
    	var shape = div.firstChild;
    	shape.style.behavior = 'url(#default#VML)';
    
    	return shape && (typeof shape.adj === 'object');
    
    } catch (e) {
    	return false;
    }
}());
function svg$1(options) {
    return svg || vml ? new SVG(options) : null;
}
Map.include({
    _createRenderer: function (options) {
    	return (this.options.preferCanvas && canvas$1(options)) || svg$1(options);
    }
}
複製程式碼

在jsdom環境下svg為false，vml為false；且this.options.preferCanvas預設為false，所以_createRenderer返回null了
解決：設定this.options.preferCanvas為true，使用canvas來作為renderer

3.設定canvas作為renderer報錯：Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

原因：jsdom不支援canvas，需要額外引入包
解決：安裝jest-canvas-mock包，在jest的配置檔案中新增 setupFiles: ['jest-canvas-mock']

未完待續...

相關文章