React Testing using Jest : How to call parent methods passed to Mocked Child Component via props

[morganm94]

I have a parent component which calls a child component and pass a method handleIncrement via props.

I want to test the ParentComponent via Jest with following steps:

1. Mock the ChildComponent via Jest

2. Call ParentComponent's handleIncrement method via mocked ChildComponent.

Issue: How to pass props to ChildComponent and call ParentComponent method

Parent Component

    import React, { useState } from 'react';
    import ChildComponent from './ChildComponent';

      const ParentComponent = () => {
      const [count, setCount] = useState(0);
        const handleIncrement = () => {
           setCount(count + 1);
        };
    return (
     <div>
      <ChildComponent onIncrement={handleIncrement} />
       <p>Count: {count}</p>
     </div>
    );
    };
    export default ParentComponent;

Child Component

 import React from 'react';

 const ChildComponent = (props) => {
  return (
    <button onClick={props.onIncrement}>
     Increment Count
    </button>
  );
};
export default ChildComponent;

This is my Jest test file:

How to call props.onIncrement() ?

jest.mock('ChildComponent', () => {
  return {
  __esModule: true,
   default: () => {

     const onIncrementHandler = () => {
      props.onIncrement() // ==================>>>>>>  How to call this ?
     }
     return (
       <div>
         <Button id='test-button' onClick={onIncrementHandler}>Test Button</Button>
       </div>
      )
     },
   }
 })

describe('ParentComponent', () => {
  test('test button Click', async () => {
   render(<ParentComponent />)
   const testButton = await screen.findByTestId('test-button')
   fireEvent.click(testButton)
  })
})

[azurespheredev]

You need to mock the ChildComponent and make sure the onIncrement prop is correctly passed and called.

1. Mock the ChildComponent in your test file.
2. Render the ParentComponent.
3. Trigger the onIncrement function via the mocked ChildComponent.

ParentComponent.js

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onIncrement={handleIncrement} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

ChildComponent.js

import React from 'react';

const ChildComponent = (props) => {
  return (
    <button onClick={props.onIncrement}>
      Increment Count
    </button>
  );
};

export default ChildComponent;

ParentComponent.test.js

import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import ParentComponent from './ParentComponent';

// Mock ChildComponent
jest.mock('./ChildComponent', () => (props) => (
  <button data-testid="test-button" onClick={props.onIncrement}>
    Test Button
  </button>
));

describe('ParentComponent', () => {
  test('increments count on button click', () => {
    render(<ParentComponent />);

    // Get the button and click it
    const testButton = screen.getByTestId('test-button');
    fireEvent.click(testButton);

    // Check if the count incremented
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

[morganm94]

I've got a solution. Thank you for your effort!

[vivekdShl]

You need to mock the ChildComponent and make sure the onIncrement prop is correctly passed and called.

1. Mock the ChildComponent in your test file.
2. Render the ParentComponent.
3. Trigger the onIncrement function via the mocked ChildComponent.

ParentComponent.js

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onIncrement={handleIncrement} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

ChildComponent.js

import React from 'react';

const ChildComponent = (props) => {
  return (
    <button onClick={props.onIncrement}>
      Increment Count
    </button>
  );
};

export default ChildComponent;

ParentComponent.test.js

import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import ParentComponent from './ParentComponent';

// Mock ChildComponent
jest.mock('./ChildComponent', () => (props) => (
  <button data-testid="test-button" onClick={props.onIncrement}>
    Test Button
  </button>
));

describe('ParentComponent', () => {
  test('increments count on button click', () => {
    render(<ParentComponent />);

    // Get the button and click it
    const testButton = screen.getByTestId('test-button');
    fireEvent.click(testButton);

    // Check if the count incremented
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

Why can't we call the handleIncrement() function directly instead of cloning it's implementation, which in this case is Count: 1. Let's say there is a handler function which is executing more than one statements, for example:-
handleFunction () => { setCount(1); doThis(); doThat(); .... }

How to handle such cases?