Question

我正在使用Jasmine为Typescript / React项目编写单元测试。我遇到了麻烦，因为在一个TSX文件中，我导入了SVG。我正在使用命令import React, { Component } from 'react'; import isRequiredIf from 'react-proptype-conditional-require'; import PropTypes from 'prop-types'; class AdSlot extends Component { // React component stuff } const slotPropTypes = PropTypes.oneOfType([ PropTypes.string, // e.g. 'fluid' PropTypes.arrayOf(PropTypes.number), // e.g. [300, 250] PropTypes.arrayOf(PropTypes.array), // e.g. [[300, 250], [1650, 300]] PropTypes.arrayOf(PropTypes.oneOfType([ // e.g. ['fluid', [300, 250]] PropTypes.string.isRequired, PropTypes.array, ])), ]); const responsiveSizesPropTypes = PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.number, PropTypes.array, PropTypes.string, ])); const doesNotHaveResponsiveSizes = props => !(props.hasOwnProperty('responsiveSizes')); const doesNotHaveSlotSizes = props => !(props.hasOwnProperty('slotSizes')); AdSlot.proptypes = { slotSizes: isRequiredIf(slotPropTypes, doesNotHaveResponsiveSizes), responsiveSizes: isRequiredIf(responsiveSizesPropTypes, doesNotHaveSlotSizes), } export default AdSlot;运行单元测试，并且当ts-node去转译.ts文件时，它由于错误ts-node node_modules/.bin/jasmine

而失败

我相当确定，如果我构建项目（我正在使用webpack），则可以针对该构建版本运行测试，但如果可能的话，我宁愿针对原始源运行测试，并以打字稿形式编写测试好。我想念什么？有什么办法可以做到这一点？

这是我的示例代码：

Cannot find module './demo.svg'.

这是我的（经过简化的）样本测试：

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

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

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

export default demo

Answer 1

我假设您正在使用Webpack加载程序在Webpack构建中“导入” SVG文件。当您使用ts-node对源运行测试时，除非您使用提供与Webpack加载程序相同功能的Node require钩子，否则导入将无法进行。我不知道这样的事情是否存在。如您所述，最简单的选择可能是针对Webpack捆绑包运行测试。

已使用Jasmine导入SVG的单元测试打字稿/反应

1 个答案: