Я хочу, чтобы мои изображения были именами/дорожками при использовании Jest Snapshots

Question

Я начал использовать Jest много нового проекта, и теперь я использую функциональность Jest для Snapshot.

Вкратце, то, что он делает, отображает ваши компоненты в строке, сохраняет их на диске (как моментальный снимок, который вы можете зарегистрировать в своем репо), а когда вы запустите свои тесты позже, он сравним что снимок не изменился.

Мой вопрос связан с импорт изображений:

Обычный способ справиться с этим с Jest это указать обработчик для импорта тех, издеваться их и возвращает случайную строку. Таким образом, вашим тестам не нужно будет загружать изображение, это будет просто издеваться (иначе вы получите исключения, поскольку Node не знает, как обращаться с import img from './image.png, только через Webpack через загрузчик).

В конфигурации Jest, вы могли бы сделать что-то вроде этого:

"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" /> 
`; 

Я не считаю, что я только один перед этим но, с другой стороны, я не мог найти ни одного ресурса, где бы ни разрешал это.

Спасибо!

Answer 1

Вместо того чтобы полагаться на 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" 
    } 
    } 
}