TypeError：无法读取未定义 jest.js 的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of undefined jest.jsTypeError：无法读取未定义 jest.js 的属性“地图”
【发布时间】：2021-02-25 05:55:36
【问题描述】：

我正在尝试做一个非常基本的 Flashcard 应用程序来响应。我对它很陌生，所以如果我的代码充满错误或做得不好，我提前道歉。我只是想开玩笑地对我的组件运行一个非常简单的测试，看看它是否在没有崩溃的情况下呈现。当我从命令行启动纱线但测试一直失败时，我的应用程序运行良好。任何帮助将不胜感激！

卡片列表组件

import React from 'react';
import Card from './Card';

export default function CardList({ cards }) {
  return (
    //grid styling so that the app can be responsive no matter the screen size
    <div className="my-grid">
      {cards.map(card => {
        //return card component only re renders unique elements
        return <Card card={card} key={card.id} />
      })}
    </div>
  )
}

`这是组件的代码，下面是测试：

import React from 'react';
import ReactDOM from 'react-dom';
import CardList from './CardList';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<CardList />, div);
});

【问题讨论】：

您没有将任何参数传递给 Cardlist 构造函数，显然 cards 未定义
将cards 属性传递给组件

标签： javascript reactjs jestjs undefined

【解决方案1】：

您应该将cards 作为CardList 组件的道具传递。

例如

CardList.jsx:

import React from 'react';
import Card from './Card';

export default function CardList({ cards }) {
  return (
    <div className="my-grid">
      {cards.map((card) => {
        return <Card card={card} key={card.id} />;
      })}
    </div>
  );
}

Card.jsx:

export default function Card({ card }) {
  return <div>{card.name}</div>;
}

CardList.test.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import CardList from './CardList';

it('renders without crashing', () => {
  const cards = [{ id: 1, name: 'teresa teng' }];
  const div = document.createElement('div');
  ReactDOM.render(<CardList cards={cards} />, div);
});

单元测试结果：

 PASS  src/stackoverflow/64817280/CardList.test.jsx (11.207s)
  ✓ renders without crashing (22ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.292s

【讨论】：