单元测试 Typescript/React 已使用 Jasmine 导入 SVG

Question

我正在使用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()
})
})

Answer 1

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