Модульное тестирование Typescript / React с импортированными SVG-файлами с помощью Jasmine

Я использую Jasmine для написания модульных тестов для проекта Typescript / React. У меня проблема, потому что в одном из файлов TSX я импортирую SVG. Я запускаю свои модульные тесты с помощью команды ts-node node_modules/.bin/jasmine, и когда ts-node переходит на транспилирование файлов .ts, он не работает с ошибкой Cannot find module './demo.svg'.

Я почти уверен, что если я соберу свой проект (я использую webpack), то смогу запустить тесты для этой сборки, но я бы предпочел работать с исходным исходным кодом, если это возможно, и писать свои тесты на машинописном тексте. Что мне не хватает? Есть ли способ добиться этого?

Вот мой пример кода:

import * as demoImg from './demo.svg'

const demo = {
   generate: (records: ForcedRecord[], groupings: Group[], params:any) => {

   return (
      <div>
         <img src = {demoImg}/>
      </div>
   )
}

export default demo

Вот мой (сокращенный и упрощенный) образец теста:

import demoCmp from '../../src/processors/demo/demo'

describe('demo', () => {

    let result

    beforeEach(() => {
        result = demoCmp.generate([], [], {})
    })

    it('should return a non-null result', () => {
        expect(result).not.toBeUndefined()
    })
})
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
81
1

Ответы 1

Я предполагаю, что вы используете загрузчик Webpack для «импорта» файла SVG в свою сборку Webpack. Когда вы запускаете свои тесты для источника с помощью ts-node, импорт не будет работать, если вы не используете ловушку Node require, которая обеспечивает функциональность, эквивалентную функциональности вашего загрузчика Webpack; Я не знаю, существует ли такое. Как вы упомянули, самый простой вариант - это, вероятно, запустить тесты с пакетом Webpack.

Другие вопросы по теме