Я использую Jest и Enzyme для тестирования компонентов React, но я обнаружил трудности при тестировании простого компонента без сохранения состояния, который состоит из результата функции javascript карты.
Компонент MovieCard.js:
import React from 'react'
import PropTypes from 'prop-types'
const MovieCard = ({ resultsForSubmit }) =>
(
resultsForSubmit.map(r => (
<article className = "card" key = {r.imdbID}>
<a href = {r.Poster}>
<picture className = "thumbnail">
<img src = {(r.Poster !== "N/A")? r.Poster : "src/assets/not-found.png"} alt = {r.Title} />
</picture>
</a>
<div className = "card-content clearfix">
<div className = "review">
<h2>{r.Title}</h2>
<p>{r.Type}</p>
</div>
<div className = "reviewer">
</div>
</div>
</article>
)
)
)
export default MovieCard;
MovieCard.propTypes = {
resultsForSubmit: PropTypes.array,
}
MovieCard.test.js
import React from 'react'
import { mount } from 'enzyme'
import MovieCard from './MovieCard';
describe('<MovieCard /><MovieCard />', () => {
const data = [
{ imdbId: '2', Poster: 'poster2', Title: 'title2', Type: 'type2' }
];
it('renders 2 <MovieCard /> components', () => {
mount(<MovieCard data = { data } />);
});
})
когда я запускаю тест, отображается эта ошибка:
**<MovieCard /><MovieCard /> › renders 2 <MovieCard /> components
TypeError: Cannot read property 'map' of undefined
4 | const MovieCard = ({ resultsForSubmit }) =>
5 | (
> 6 | resultsForSubmit.map(r => (
| ^
7 | <article className = "card" key = {r.imdbID}>
8 | <a href = {r.Poster}>
9 | <picture className = "thumbnail">**
На данный момент я просто хочу проверить, отображается ли компонент, но я открыт для предложений по использованию на нем других функций тестирования.
вы правы, я отправлял данные как prop, а не resultsForSubmit, спасибо





<MovieCard /> ожидает опоры resultsForSubmit, и вы передаете data в своем тесте.
Попробуйте вместо этого что-нибудь вроде этого:
MovieCard.test.js
describe('<MovieCard />', () => {
const resultsForSubmit = [
{ imdbId: '1', Poster: 'poster1', Title: 'title1', Type: 'type1' },
{ imdbId: '2', Poster: 'poster2', Title: 'title2', Type: 'type2' }
];
let movieCard;
beforeEach(() => {
movieCard = shallow(<MovieCard resultsForSubmit = {resultsForSubmit} />);
});
it('renders 2 articles', () => {
expect(movieCard.find('article').length).toBe(2);
});
})
это работает, спасибо. Я передавал данные как реквизиты, а не resultsForSubmit.
ваш компонент пытается выполнить итерацию через свойство с именем
resultsForSubmit, пока вы передаетеdataи не передаетеresultsForSubmit. поэтому сначала вы должны использовать соответствующее имя свойства. также, возможно, вы можете улучшить часть рендеринга, чтобы проверить, существует лиresultsForSubmitвообще, чтобы избежать неисправимой ошибки и вместо этого увидеть какое-то сообщение