Сбой теста Mocha для компонента React, содержащего изображение - PullRequest
0 голосов
/ 09 января 2020

Я делаю юнит-тесты для компонентов React. Тесты работают нормально, если нет компонента, содержащего изображение. В этом случае тест компонента никогда не запускается, потому что программа останавливается до того, как тест даже начинает выполняться.

Это структура каталогов

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

Это пакет. json file

{
  "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) { ����

Вот изображение полного вывода:

Снимок экрана с ошибкой теста Mocha

Я также поместил минимальный тестовый пример на github здесь

Может кто-нибудь сказать, почему происходит сбой программы? Мне также интересно, как это исправить, и если это правильный способ тестирования компонента с изображением.

1 Ответ

0 голосов
/ 09 января 2020
Функция

require загружает только файлы Javascript и не понимает формат изображения. Если вы хотите визуализировать изображение, вам нужно предоставить прямой URl для атрибута sr c

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 расположение файла.

...