包含图像的React组件的Mocha测试失败

Question

我正在为React组件做单元测试。测试运行良好，除非有包含图像的组件。在这种情况下，组件测试永远不会运行，因为程序甚至在测试开始运行之前就停止了。

这是目录结构

data
- images.js
public
- images
  - photo.jpeg
src
- components
  - Photo.js
test
- components
  - Photo.spec.js
package.json

这是package.json文件

{
  "name": "image-test",
  "version": "1.0.0",
  "description": "just an image",
  "scripts": {
    "test": "NODE_ENV=production mocha './test/**/*.spec.js' --require @babel/register"
  },
  "dependencies": {
    "@babel/core": "^7.7.7",
    "@babel/helper-module-imports": "^7.7.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.7.7",
    "@babel/plugin-transform-react-display-name": "^7.7.4",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.7.4",
    "@babel/register": "^7.7.7",
    "@babel/runtime": "^7.7.7",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "expect": "^24.9.0",
    "mocha": "^7.0.0",
    "react-test-renderer": "^16.12.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  }
}

这是组件Photo.js

import React from 'react'
import PropTypes from 'prop-types'

export default class Photo extends React.Component {
  render() {
    const { image } = this.props
    return (
      <div>
    <img
      src={require(`../../public/images/${image.display_src}`).default}
      alt={image.caption} />
      </div>
    )
  }
}

Photo.propTypes = {
  image: PropTypes.object,
}

下面是一个数据文件，其中包含关于一个图像的信息(实际实现具有更多图像)。

const images = [
  {
    "display_src": "photo.jpeg",
    "caption": "The photo"
  },
]

export default images 

下面是组件测试文件Photo.spec.js

import React from 'react'
import TestRenderer from 'react-test-renderer'
import expect from 'expect'
import Photo from '../../src/components/Photo'

import images from '../../data/images'

describe('Photo Component', function () {
  it('should return a figure element', () => {
    const props = {
      image: images[0],
    }

    const result = TestRenderer.create(<Photo {...props} />)
    console.log(result)
    expect(result.type).toEqual('figure')
  })
})

当我运行测试时

npm run test

我得到了这个错误：

/Users/elbegom/Desktop/study/redux/state-management/simpletest/public/images/photo.jpeg:1
(function (exports, require, module, __filename, __dirname) { ����

以下是完整输出的图像：

Screenshot of Mocha test error

我还在github here上放置了一个最小的测试用例。

谁能解释一下为什么这个程序失败了？我也想知道如何解决这个问题，以及这是否是使用图像测试组件的正确方法。

Answer 1

require函数仅加载Javascript文件，并且它不能理解图像格式。如果要呈现图像，则需要提供指向src属性的直接URl

export default class Photo extends React.Component {
  render() {
    const { image } = this.props;
    return (
      <div>
        <img src={`../../public/images/${image.display_src}`} alt={image.caption} />
      </div>
    );
  }
}

还要注意，src路径应该相对于呈现组件的网页url，而不是相对于javascript文件位置。