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