How to mock event handler function defined on parent component and geting invoked on child component

Open Bhuvanesh-git331 opened this issue 3 years ago • 0 comments

@testing-library/react version:
Testing Framework and version:
DOM Environment:

Relevant code or config:

This is my code below. onContinue and onLogout eventhandler functions defined in parent comp i.e sessionTimeOut.js and been invoked in child component sessionTimeOutDialog.js. After performing userEvent.click the event handlers are not getting mocked or covered.

Can anyone suggest where im going wrong?

import { render, cleanup, fireEvent, waitFor, screen } from "@testing-library/react"; import { wrapRoutesChild, wrapwithRouter } from "../testUtils"; import SessionTimeout from '../components/sessiontimeout/SessionTimeout' import SessionTimeoutDialog from '../components/sessiontimeout/SessionTimeoutDialog' import { createMocks } from 'react-idle-timer' import { MessageChannel } from 'worker_threads' import userEvent from '@testing-library/user-event' import { IdleTimer } from '../components/sessiontimeout/IdleTimer' import { act } from "react-dom/test-utils"; jest.useFakeTimers(); beforeAll(() => { createMocks() global.MessageChannel = MessageChannel }) afterAll(cleanup)

describe('check whether SessionTimeout is rendered', () => { let wrapper beforeEach(() => { wrapwithRouter(); }) afterEach(()=>{ jest.runOnlyPendingTimers() jest.useRealTimers() cleanup() }) test('check for SessionTimeout rendering', () => { wrapper = render(<SessionTimeout isAuthenticated={true} logOut={jest.fn()} />) expect(wrapper).toBeDefined() })

test('IdleTimer', ()=>{
    const props1={
        onActive:jest.fn(),
        onIdle:jest.fn(),
        debounce:250,
        timeout:60000
    }
    render(<IdleTimer {...props1}/>)
})

test('check for SessionTimeoutDialog open', async() => {
  const onContinue=jest.fn().mockReturnValueOnce(()=>({
    handleContinue:jest.fn()
  }))
  const onLogout=jest.fn().mockReturnValueOnce(()=>({
    handleLogout:jest.fn()
  }))
   let comp
   await act(async()=>{
     comp = render(<SessionTimeoutDialog countdown={10} onContinue={onContinue} onLogout={onLogout} open={true}
    />)
   })
    expect(comp.getAllByRole("button").length).toBe(2);
    userEvent.click(comp.getByRole("button", { name: /continue Session/i }));
    await waitFor(()=>expect(handleContinue).toBeCalledTimes(1))
    // userEvent.click(comp.getByRole("button", { name: /Logout/i }));
    // await waitFor(()=>expect(onLogout).toHaveBeenCalled())
})

})

var your => (code) => here;

How to mock event handler function defined on parent component and geting invoked on child component

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution: