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

Question

我有一个包含输入和按钮的组件。当用户在输入中键入爱好时，假设将该字符串发送到 API 进行更新。我已经设置了我的测试并且我正在测试组件是否存在并且我收到错误 TypeError: Cannot read property 'map' of undefined, 当我 console.log(component)。它表示组件未定义。

当我注释掉 {this.state.hobbies.map()} 部分（包括第二个渲染和其中的所有内容）时，组件能够渲染。

    EditProfile.js
    import React, { Component } from 'react';
    import { MdDelete } from 'react-icons/md';
    import { updateHobbies } from '../../services/updateHobbies';
    import './edit_profile.scss';
    import PropTypes from 'prop-types';

    class EditProfile extends Component {
      state = {
        hobbies: this.props.employeeHobbies,
        userInput: ''
      };

      handleChange = e => {
        this.setState({ userInput: e.target.value });
      };

      handleButtonClick = () => {
        const hobby = this.state.hobbies.concat(this.state.userInput);
        this.setState({ hobbies: hobby, userInput: '' }, () => 
       updateHobbies(this.state.hobbies));
      };

      handleDelete = e => {
        const array = [...this.state.hobbies];
        const index = array.indexOf(e);
        if (index !== -1) {
          array.splice(index, 1);
          this.setState({ hobbies: array }, () => 
         updateHobbies(this.state.hobbies));
        }
      };

      render() {
        return (
          <div>
            <label className='employee-label'>HOBBIES: </label>
            <span>
              <input type='text' value={this.state.userInput} onChange= 
           {this.handleChange} />
              <button className='update-details-button' onClick= 
        {this.handleButtonClick}>
                Add
              </button>

              {this.state.hobbies.map(hobbies => {
                return (
                  <li className='employee-tag-list' key={hobbies}>
                    {hobbies}
                    <span className='delete-icons' onClick={() => 
         this.handleDelete(hobbies)}>
                      <MdDelete />
                    </span>
                  </li>
                );
              })}
            </span>
          </div>
        );
      }
    }
   EditProfile.propTypes = {
  employeeHobbies: PropTypes.array
};

export default EditProfile;

EditProfile.test.js

let component;
  const chance = new Chance();
  let mockHandleChange = jest.fn();
  let mockHandleButtonClick = jest.fn();
  let mockHandleDelete = jest.fn();
  let mockUpdateHobbies;
  let mockHobbies = [chance.string(), chance.string(), chance.string()];

  function requiredProps(overrides = {}) {
    return {
      handleChange: mockHandleChange,
      handleButtonClick: mockHandleButtonClick,
      handleDelete: mockHandleDelete,
      ...overrides
    };
  }

  function renderComponent(props = requiredProps()) {
    return shallow(<Hobbies {...props} />);
  }

  beforeEach(() => {
    component = renderComponent();
  });

  it('should exist', () => {
    console.log(component.debug());
    expect(component).toHaveLength(1);
  });

我希望测试通过，但我收到错误，TypeError: Cannot read property 'map' of undefined

Answer 1

您可以做一些事情，所有这些都旨在解决核心问题：您没有在测试中为 employeeHobbies 属性提供值。

选择以下选项之一：

1. 正如@Hoyen 建议的那样，添加默认道具来为employeeHobbies 指定一个空数组（如果未提供）。 EditProfile.defaultProps = { employeeHobbies: [] };。
2. 在您的测试文件中的requiredProps() 函数中，为空数组的employeeHobbies 指定一个值以及handleChange、handleButtonClick 等其他属性。
3. 初始化state.employeeHobbies 时，将其设置为this.props.employeeHobbies || [],，以便在传递空值或空值（未定义）时具有备用值。

我还建议您将 employeeHobbies 的 proptype 指定为 PropTypes.array.isRequired，以便在未提供数组时获得有用的警告。这将防止滥用该组件，并违反它需要工作的合同。