使用映射函数返回的 Jest 和 Enzyme 测试 React 组件答案

【问题标题】：Test React Component with Jest and Enzyme, which are returned by a map function使用映射函数返回的 Jest 和 Enzyme 测试 React 组件
【发布时间】：2018-10-19 20:44:11
【问题描述】：

我正在使用 Jest 和 Enzyme 来测试 React 组件，但我发现在测试一个简单的无状态组件时遇到了困难，该组件由 map 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">**

现在我只想测试组件是否被渲染，但我愿意接受在其上使用其他测试功能的建议。

【问题讨论】：

您的组件在传递 data 而未传递 resultsForSubmit 时尝试迭代名称为 resultsForSubmit 的 prop。所以首先你必须使用适当的道具名称。也可能您可以增强渲染部分以检查 resultsForSubmit 是否存在以避免不可恢复的错误并改为查看一些消息
你说得对，我发送的是数据作为 prop，而不是 resultsForSubmit，谢谢

标签： reactjs testing jestjs enzyme

【解决方案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 传递。