React Jest: TypeError: Cannot read property 'map' of undefined

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

options: { key: string text: string value: string }[] I am passing here and code is working properly, it's just test which is failing. I guess It's because i am not passing the option in the dropdown from test — A H K
– A H K, Commented Oct 14, 2019 at 9:34
Probably I need to do something like this const wrapper = shallow(<Dropdown placeholder={placeholder} options={options} onSelect={setValue} value={value} />); In the test — A H K
– A H K, Commented Oct 14, 2019 at 9:35

Paul Fitzgerald · Accepted Answer · 2019-10-14 09:37:18Z

2

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

answered Oct 14, 2019 at 9:37

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

A H K Over a year ago

Yeah, but the main thing what i am struggling with is that how can i use my DropdownProps interface in the test? I can not just pass options as it will throw ReferenceError: options is not defined

Paul Fitzgerald Over a year ago

I don't really understand what you mean 😳. Your DropdownProps are just describing the props that you are passing. Also, the options are not defined with a ? so you need to pass them. You don't need to use these props in the test, the interface is defined in the component so that is enough. I would be surprised if it throws an error if you pass all the necessary props. Also, if you put a ? in your options?: ... then TS will complain and force you do do options && options.map...

A H K Over a year ago

Yeah I tried passing options={options} but it's throwing ReferenceError: options is not defined error :P

Paul Fitzgerald Over a year ago

have you defined options in your test? You will need to create a dummy options like options={[{key: 1, text: 'One', value: '1'}]}

Ponpon32 · Accepted Answer · 2020-08-01 21:25:50Z

1

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

edited Aug 1, 2020 at 21:25

Ponpon32

2,2102 gold badges16 silver badges26 bronze badges

answered Aug 1, 2020 at 14:38

Jayshree Wagh

803 bronze badges

Collectives™ on Stack Overflow

React Jest: TypeError: Cannot read property 'map' of undefined

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related