React Jest：TypeError：无法读取未定义的属性“地图”

Question

I am new to react and have a failing test which i am not able to understand whether it's a class import issue or I am not sending required params correctly.

Here is my code

import * as React from 'react'
import cx from 'classnames'
import './dropdown.scss'

export interface DropdownProps {
    options: {
        key: string
        text: string
        value: string
    }[]
    value?: string
    placeholder?: string
    onSelect?: (value: string) => any
    children?: React.ReactNode
}

export const Dropdown = ({ options, value, placeholder, onSelect }: DropdownProps) => {
    const hasValue = typeof value === 'string';

    const [ top, setTop ] = React.useState(0);
    const handleTriggerRef = (el: HTMLButtonElement) => {
        if (el) {
            setTop(el.clientHeight)
        }
    };

    return (
        <div className={cx('dropdown-container')}>
            <button
                className={cx('title', { hasValue: hasValue })}
                ref={handleTriggerRef}
                onClick={() => {
                    if (value && typeof onSelect === 'function') {
                        onSelect(value)
                    }
                }}
            >{hasValue ?
                options.filter(item => item.value === value)[0].text :
                (placeholder || 'Select value')}</button>
            <div
                style={{ top }}
                className={cx('options')}
            >
                {options.map(option =>
                    <div
                        key={option.key}
                        className={cx('option')}
                        onClick={() => {
                            onSelect(option.value)
                        }}
                    ><div className={cx('text')}>{option.text}</div></div>)}
            </div>
        </div>
    )
};

And here is the test

import { shallow } from "enzyme/build";
import React from "react";
import { Dropdown } from "../dropdown";

describe('Dropdown component', () => {
  test("Renders correctly", () => {
    const wrapper = shallow(<Dropdown />);

    expect(wrapper.exists()).toBe(true);
  });
});

Answer 1

It is because you are not passing options to your Dropdown component.

The following will prevent the error.

{options && options.map(option => .....

But what you really will also want to do in your jest test is

<Dropdown options={options} />;

Answer 2

As you are using hooks it is recommended that we should use mount instead of shallow .

The error you are getting is because props are not passed to shallow render.

import { shallow } from "enzyme/build";
import React from "react";
import { Dropdown } from "../dropdown";

describe('Dropdown component', () => {
  // no need to pass the optional props
  const props = {
    options: [{ key: 'key',text: 'text',value: 'value'}],
    value: 'value',
    placeholder: 'placeholder',
    onSelect: jest.fn(),
    children: <div>test</div>
  }

  test("Renders correctly", () => {
    const wrapper = shallow(<Dropdown {...props}/>);
    expect(wrapper.exists()).toBe(true);
  });
});