摩卡測試失敗使用巴貝爾和webpack

所以我在這裏使用webpack，babel和mocha。當我有這樣的代碼：摩卡測試失敗使用巴貝爾和webpack

import userImage from '../../images/user.png';

和我在一個字符串的文件的路徑建立與的WebPack，userImage的結果，因爲我使用的圖像文件加載器（要求叫我不嵌入圖片）然而，當我嘗試使用運行我的摩卡測試：

./node_modules/.bin/babel-node ./node_modules/.bin/babel-istanbul cover ./node_modules/.bin/_mocha

我得到一個語法錯誤：

SyntaxError: /repositories/react-seed/web/app/images/user.png: Unexpected character '�' (1:0) 
> 1 | �PNG 
    |^
    2 | 
    3 |

我刪除伊斯坦布爾時也會出現此錯誤。所以它似乎試圖加載實際的圖像文件，但可以解析爲JavaScript，因爲它不是。

任何人都知道解決此問題的方法？

來源

2016-02-21 ryanzec

Mocha在Node中運行，並且您正在導入Node不知道如何處理的文件類型。你在期待什麼'userImage'在這種情況下？ – loganfsmyth

您可以使用--compilers選項，它允許您自定義nodejs require系統以便讓它理解png文件。所以：

mocha --compilers png:./mochacfg.js

或者創建一個文件 '測試/ mocha.opts' 包含（對於您的需求更好）：

--compilers png:./mochacfg.js

隨着./mochacfg.js：

require.extensions['.png'] = function(){ return null; }

這忽略png文件（如果你沒有對它們做任何特別的事情，應該可以）。

如果你想要做的事與圖像數據：

var fs = require('fs'); 
require.extensions['.png'] = function(module, filepath) { 
    var src = fs.readFileSync(filepath).toString ('base64'); 
    return module._compile('module.exports = "data:image/png;base64,' + src + '";'); 

}

來源

2016-02-21 22:35:05 alain

它比較晚來回答這個問題，但只是對知識共享的目的，我在回答另一種方法來做到這一點。

創建一個test-config.js文件並在運行時使用它摩卡測試用例。

var jsdom = require('jsdom').jsdom; 
process.env.NODE_ENV = 'test'; 

// ------------------------------- 
// Disable webpack-specific features for tests since 
// Mocha doesn't know what to do with them. 

['.css', '.scss', '.png', '.jpg'].forEach(ext => { 
    require.extensions[ext] =() => null; 
});

和內部的package.json使用這個測試命令來運行測試用例

"test": "mocha ./test/test-setup.js './test/**/*.spec.js' --compilers js:babel-core/register",

我希望它可以幫助別人。

來源

2017-05-19 15:56:05 WitVault

摩卡測試失敗使用巴貝爾和webpack

回答

相關問題