使用 Jasmine 对已导入 SVG 的 Typescript/React 进行单元测试答案

【问题标题】：Unit Testing Typescript/React that has Imported SVGs with Jasmine使用 Jasmine 对已导入 SVG 的 Typescript/React 进行单元测试
【发布时间】：2019-03-26 21:29:29
【问题描述】：

我正在使用 Jasmine 为 Typescript/React 项目编写单元测试。我遇到了麻烦，因为在其中一个 TSX 文件中，我导入了 SVG。我正在使用命令 ts-node node_modules/.bin/jasmine 运行单元测试，当 ts-node 转译 .ts 文件时，它因错误 Cannot find module './demo.svg'. 而失败

我相当确定，如果我构建我的项目（我正在使用 webpack），那么我可以针对该构建运行测试，但如果可能的话，我宁愿针对原始源运行，并在 typescript 中编写我的测试好吧。我错过了什么？有没有办法做到这一点？

这是我的示例代码：

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()
    })
})

【问题讨论】：

标签： reactjs typescript unit-testing jasmine

【解决方案1】：

我假设您正在使用 Webpack 加载器在您的 Webpack 构建中“导入”SVG 文件。当您使用 ts-node 对源代码运行测试时，除非您使用提供与 Webpack 加载器等效功能的 Node 要求钩子，否则导入将无法工作；我不知道这样的事情是否存在。正如您所提到的，最简单的选择可能是针对 Webpack 包运行测试。

【讨论】：