Тестируйте компонент React с помощью Jest и Enzyme, которые возвращаются функцией карты

Я использую 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">**

На данный момент я просто хочу проверить, отображается ли компонент, но я открыт для предложений по использованию на нем других функций тестирования.

ваш компонент пытается выполнить итерацию через свойство с именем resultsForSubmit, пока вы передаете data и не передаете resultsForSubmit . поэтому сначала вы должны использовать соответствующее имя свойства. также, возможно, вы можете улучшить часть рендеринга, чтобы проверить, существует ли resultsForSubmit вообще, чтобы избежать неисправимой ошибки и вместо этого увидеть какое-то сообщение

skyboyer 19.10.2018 23:04

вы правы, я отправлял данные как prop, а не resultsForSubmit, спасибо

Renzo Muzi Alvarado 22.10.2018 14:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
1 740
1

Ответы 1

<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.

Renzo Muzi Alvarado 22.10.2018 14:02

Другие вопросы по теме