0

I am facing issues in triggering the Enter event on button and testing the method associated with the event. I have two buttons refine search and close button on my component, so trying to implement the same associated click functionality with Enter key as well. For this, I am calling keyDownHandler method onKeydown event and call respective methods.

This is my method in component

const keyDownHandler = event = {
const targetValue = event.target.id
  if(event.key === 'Enter' || event.keyCode=== 13){
      if(targetvalue === 'someid1'){
          return executeHandleRefineSearch()
      }
      if(targetvalue === 'someid2'){
          return executeHandleClose()
      }
  }
 }

My test case is

import React from 'react'
import { cleanup, render, fireEvent } from '@testing-library/react'
import ReactDOM from 'react-dom'
import '@testing-library/jest-dom/extend-expect'
import myButtonGroup from '.'

afterEach(cleanup)

beforeAll(() => {})

describe('myButtonGroup ', () => {

it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<myButtonGroup/>, div)
})

it('enter key on clear button only should trigger executeHandleRefineSearch', () => {
  const { container } = render(<myButtonGroup />)
  const executeHandleRefineSearchMock = jest.fn()
  const event = {
   key: 'Enter',
   code: 'Enter',
   keyCode: 13,
   charCode: 13,
   target: { id: 'someid1' }
 }
 const refineSearchButton = container.querySelector(
  '#someid1'
 )
 fireEvent.keyDown(refineSearchButton, event)
 expect(executeHandleRefineSearchMock ).toHaveBeenCalled()
  })
})

I am getting below error expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

Any suggestion would be greatly appreciated.

Updated test case after the suggestion

 it('enter key on clear button only should trigger executeHandleRefineSearch', () => {
 const executeHandleRefineSearchMock = jest.fn()
 const { container } = render(
   <myButtonGroup 
     handleClearSearchValues={executeHandleRefineSearchMock}
   />
 )
 const event = {
   key: 'Enter',
   keyCode: 13,
   charCode: 13,
   target: { id: 'someid' }
 }
 const refineSearchButton = container.querySelector(
   '#someid'
 )
 refineSearchButton .focus()
 userEvent.click(refineSearchButton, event)
 expect(handleClearSearchValuesMock).toHaveBeenCalled()
})
Jayesh Ambali
  • 211
  • 6
  • 24
  • Can you share the test file as a whole and not just the body of that specific file? Or at least the set-up (imports, global variable declarations, `beforeEach`, ...) and then the full declaration of this individual test. – Karel Jul 16 '22 at 11:49
  • i have updated the question and added some more information. Hope this will help you to understand my issue @Karel – Jayesh Ambali Jul 16 '22 at 13:13

1 Answers1

0

In your code, executeHandleRefineSearchMock will never be called because it is just a stand-alone variable. It is not connected to your myButtonGroup component in any way.

What you will need to do is create a mock of myButtonGroup which has a jest.fn() implementation of the method for which you want to assert that it has been called.

However, it seems worth mentioning that mocking this component/method is discouraged when testing with the React Testing Library, because that library was invented to write tests that resemble the way the users interact with our application. If you insist on using the React Testing Library, it seems like a better option to test if the expected (visual) effect has taken place after your method has been executed (e.g. are the expected search results visible on screen or something similar).

For your use case, I would also advise you to look at the userEvent companion library instead of fireEvent. It will simulate real user interactions (in this case: a key press) instead of just firing DOM events.

Karel
  • 79
  • 1
  • 5
  • yes you are correct. The below code itself is not getting covered with my test case and code coverage is not increasing. const targetValue = event.target.id if(event.key === 'Enter' || event.keyCode=== 13){ – Jayesh Ambali Jul 17 '22 at 19:49
  • I updated the test case based on your suggestion, the test case passes now, but there is no change in the code coverage.. any idea ? I updated the question with updated test case. – Jayesh Ambali Jul 18 '22 at 02:06
  • Let's start with the beginning: you have seen the test case pass, but does it also fail when you change the last line to `expect(handleClearSearchValuesMock).not.toHaveBeenCalled()` ? Next, you want to see the code coverage increase for a key press but your test simulates a mouse click. What happens if you change the test to use [userEvent.keyboard](https://testing-library.com/docs/ecosystem-user-event/#keyboardtext-options) instead? – Karel Jul 19 '22 at 04:22
  • Since the code coverage was not increasing, I was trying different options. If I am using this, expect(handleClearSearchValuesMock).not.toHaveBeenCalled() , test case fails. – Jayesh Ambali Jul 20 '22 at 20:27