Question

149

How to test arrow function calling in react component with jest?

rated 0 times [ 151] [ 2] / answers: 1 / hits: 5296 / 4 Years ago, wed, december 9, 2020, 12:00:00

im newbie in jest/enzyme testing with react and im trying to test react Button Component by passing props and im getting this error Cannot read property 'onIncrement' of undefined.

describe("Name of the group", () => {

  const counter = 'pc';

  const onIncrement = jest.fn();

  const props = {

    onIncrement,

    counter

};

it("should be clicked ", () => {

  const button = shallow(<Button {...{props}}>Increment</Button>);

  button.find(".increment").simulate("click");

  expect(button).toHaveBeenCalledWith('pc');

  });

  });

   import React from "react";

   export const Button = ( props ) => {

     return (

       <button

        id="inc"

        className="increment"

        onClick={() => props.onIncrement(props.counter)}

       >

        Increment

       </button>

     );

    };

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eden

Add To Favorites

Follow

Total Points: 730

Total Questions: 117

Total Answers: 117

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

eden questions

1 Implementing advanced pagination to my react site using react-bootstrap

Thu, Mar 11, 21, 00:00, 3 Years ago

1 Dynamically access Vue component data variable names

Sun, Mar 7, 21, 00:00, 3 Years ago

1 npm run test - unsafe-perm in lifecycle

Mon, Jul 27, 20, 00:00, 4 Years ago

1 How to remove the item from the local storage by clicking on div?

Thu, Dec 5, 19, 00:00, 5 Years ago

1 Documentation for jsPDF that actually tells me the options I can set?

Thu, Jan 17, 19, 00:00, 6 Years ago

View All

answered 4 Years ago lexusg · Accepted Answer

You need to change this:

export const Button = ({ props }) => {} // component has a property called props

to this:

export const Button = (props) => {}

Otherwise:

// it is not recommended

const button = shallow(<Button {...{props}}>Increment</Button>);

Edit:

This should works:

export const Button = (props) => {

  return (

    <button

     id="inc"

     className="increment"

     onClick={() => props.onIncrement(props.counter)}

    >

     Increment

    </button>

  );

 };

describe("Name of the group", () => {

  const counter = "pc";

  const props = {

    onIncrement: jest.fn(),

    counter,

  };



  it("should ", () => {

    const button = shallow(<Button {...props}>Increment</Button>);

    button.find(".increment").simulate("click");

    expect(props.onIncrement).toHaveBeenCalledWith("pc");

  });

});