Как я могу вручную смоделировать Svg в моих тестах?

Question

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

В основном, что я собираюсь сделать, если пользователь введет «Лев», мой компонент отобразит изображение льва, «Тигра тигра» и т. Д. Используя moduleNameMapper , это всегда test-file-stub и я хочу иметь возможность jest.mock('../lion.svg', ()=> 'lion.svg') для определенных тестов.

Answer 1

благодаря настройке transform вы можете сделать это.

package.json

"jest": {
  "transform": {
    "\\.svg$": "<rootDir>/fileTransformer.js"

ВАЖНО

вам необходимо предоставить transform другим расширениям (особенно *.js и *.jsx) в явном виде, иначе вы получите ошибки. Таким образом, вы получите что-то вроде:

"transform": {
  "^.+\\.js$": "babel-jest",
  "\\.svg$": "<rootDir>/fileTransformer.js"
   ....

Что касается fileTransformer.js , он просто эмулирует путь экспорта файла (вы можете добавить любое преобразование для удаления пути или расширения или чего-либо еще):

const path = require('path');

module.exports = {
  process(src, filename) {
    return `module.exports = ${JSON.stringify(path.basename(filename))}`;
  }
};

Это значит

import svgIcon from './moon.svg';

будет работать так же, как

const svgIcon = 'moon.svg'

Так для компонента, содержащего

...
  <img src={svgIcon} />

вы можете написать утверждение как

expect(imgElementYouMayFind.props.src).toEqual('moon.svg')