开发者问题收集

React Jest:TypeError:无法读取未定义的属性“map”

2019-10-14
4147

我是 React 的新手,有一个失败的测试,我无法理解这是类导入问题还是我没有正确发送所需的参数。

这是我的代码

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>
    )
};

这是测试

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);
  });
});

2个回答

这是因为您没有将 options 传递给 Dropdown 组件。

以下操作将避免出现错误。

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

但您在 jest 测试中真正想要做的是

<Dropdown options={options} />;
Paul Fitzgerald
2019-10-14

由于您使用了 hooks,因此建议我们使用 mount 而不是 shallow

您收到的错误是因为 props 未传递给浅渲染。

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);
  });
});
Jayshree Wagh
2020-08-01