Я делаю юнит-тесты для компонентов 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 здесь
Может кто-нибудь сказать, почему происходит сбой программы? Мне также интересно, как это исправить, и если это правильный способ тестирования компонента с изображением.