Как я могу игнорировать -! Svg-react-loader! ./ path / to / my.svg при тестировании с помощью Jest, не связывая все с веб-пакетом

Мы используем svg-react-loader для некоторых файлов SVG в нашем приложении. Мы пытаемся настроить запуск jest с помощью babel-jest и следующего .babelrc:

{
  "presets": [
    "es2015", 
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy", 
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

Следующий тест не проходит:

/* global it, document */
import React from 'react'
import ReactDOM from 'react-dom'
import Comp from './Icon'

it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<Comp><div /></Comp>, div)
})

С ошибкой: Cannot find module '-!svg-react-loader!../../assets/grid.svg' from 'Icon.js'

Как я мог в шутку игнорировать импорт, который начинается с import grid from '-! Svg-react-loader! ../../ assets / grid.svg'?


jestjs babel-jest
person Vlad Nicula    schedule 05.10.2017    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Я решил эту проблему, добавив шутку для любого импорта, содержащего -! Svg-react-loader! в начале модуля.

"moduleNameMapper": {
   "^-!svg-react-loader.*$": "<rootDir>/config/jest/svgImportMock.js"
}

Где svgImportMock.js:

'use strict';
module.exports = 'div';

Это не идеально, потому что файл может просто не существовать, но предполагается, что мы видим отсутствующий модуль при объединении с webpack.

person Vlad Nicula    schedule 06.10.2017
comment
Вы нашли более подходящее решение? Для меня это тоже пока что. но хотелось бы более идеального решения - person Don Giulio; 29.11.2017
comment
Не сейчас. Я пока придерживаюсь хака. Поскольку я ничего не тестирую в SVG, это хорошее решение для меня. - person Vlad Nicula; 30.11.2017
comment
Это требует выброса из create-react-app. Есть ли решение, которого нет? - person Davi Lima; 12.09.2018
comment
Я не использую приложение create-response-app без извлечения, поэтому я не уверен - person Vlad Nicula; 07.11.2018
comment
Хорошо, это исправило мою ошибку: Cannot find module '!svg-inline-loader!assets/system-icons/icon-info.svg' from 'index.js'. (мне просто пришлось немного отредактировать регулярное выражение - '^!svg-inline-loader.*$') Спасибо @VladNicula - person Kevin Wang; 01.08.2019

arrow_upward
1
arrow_downward

Я решил это, установив jest-svg-transformer, а затем добавив эту конфигурацию:

{ "jest": { "transform": { "^.+\\.svg$": "jest-svg-transformer" } } }

person David Calhoun    schedule 08.08.2018
comment
Какие преимущества дает это решение по сравнению с предложенным мной решением? - person Vlad Nicula; 08.08.2018
comment
@VladNicula В моем случае все, чем я должен управлять, находится в моем package.json и не требует от меня создания других файлов. - person David Calhoun; 09.08.2018
comment
Это требует извлечения из приложения create-response-app. Есть ли решение, которого нет? - person Davi Lima; 12.09.2018

arrow_upward
0
arrow_downward

Мне удалось решить эту проблему, правильно обработав статические ресурсы в Jest (https://jestjs.io/docs/en/webpack#handling-static-assets):

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}


// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

module.exports = 'test-file-stub';
person FluxLemur    schedule 18.06.2020