我想在使用Jest快照時使用我的圖像文件名/路徑

我已經開始在一個新項目中使用Jest，並且我現在使用Jest的Snapshot功能。我想在使用Jest快照時使用我的圖像文件名/路徑

簡而言之，它所做的是將組件呈現爲一個字符串，將其存儲在磁盤上（作爲快照，可以在您的回購庫中籤入），以後當您運行測試時，它會比較快照沒有改變。

我的問題是與導入圖像做：

通常的方式來處理與玩笑是指定的處理程序導入那些嘲笑他們，並返回一個隨機字符串。這樣，你的測試不必真的加載圖像，它只會被嘲弄（否則你會得到例外，因爲節點不知道如何處理import img from './image.png，只有Webpack通過加載程序）。

在玩笑的配置，你會做這樣的事情：

"jest": { 
    "moduleNameMapper": { 
     "^.+\\.(png|jpg|jpeg|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/app/__mocks__/fileMock.js", 
     "^.+\\.(css|less|scss)$": "identity-obj-proxy" 
    }, 
    [...] 
}

正如你所看到的，圖像（PNG，JPEG等）都被「解決」使用fileMock，這簡直是這樣的：

module.exports = 'test-file-stub';

我在這裏的問題是，嘲弄去有點過頭了：它總是返回相同的字符串，這意味着我的快照呈現標誌看起來就像一個組件：

exports[`components - Flag should match the snapshot 1`] = ` 
<img 
    alt="Flag" 
    className="image" 
    src="test-file-stub" /> 
`;

（輸入是像<Flag country="fr" />）

我想是我的快照被渲染成這樣：

exports[`components - Flag should match the snapshot 1`] = ` 
<img 
    alt="Flag" 
    className="image" 
    src="/some/path/fr.png" /> 
`;

我不相信，我面臨這個唯一的一個問題，但另一方面，我找不到任何解決此問題的資源。

謝謝！

來源

2016-10-20 Antoine Jaussoin

而不是依靠moduleNameMapper您可以指定一個自定義transform您返回圖像路徑，而不是其來源。可以在Mocking CSS Modules下找到一個工作示例，將其粘貼到下面以便更容易。

// fileTransformer.js 
const path = require('path'); 

module.exports = { 
    process(src, filename, config, options) { 
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; 
    }, 
};

和

// package.json (for custom transformers and CSS Modules) 
{ 
    "jest": { 
    "moduleNameMapper": { 
     "\\.(css|less)$": "identity-obj-proxy" 
    }, 
    "transform": { 
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js" 
    } 
    } 
}

來源

2017-07-11 20:34:23 Valentin

鏈接已經死了。現在位於https://facebook.github.io/jest/docs/en/webpack.html#mocking-css-modules – Will

修復了鏈接，謝謝！ – Valentin

我想在使用Jest快照時使用我的圖像文件名/路徑

回答

相關問題