TypeError: e.preventDefault is not a function while invoke() function

Question

My component is

const _onBoldClick = (e) => {
    e.preventDefault();
    onEnterText(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
}
<button className = "text-button-style" onMouseDown = { e => { _onBoldClick(e)} }>B</button>

I am getting error of,

TypeError: e.preventDefault is not a function

      74 |
      75 |     const _onUnderlineClick = (e) => {
    > 76 |         e.preventDefault();
         |           ^
      77 |         onEnterText(RichUtils.toggleInlineStyle(editorState, 'UNDERLINE'));
      78 |
      79 |     }

      at _onUnderlineClick (src/components/L3_Admin/L4_AnnouncementsTab/L4_AnnouncementsPage.js:76:11)

Here my tried test code is,

   it('onmousedown U button', async () => {
        let responseData =  [
            {                
            }]

              
        const spy = jest.spyOn(axios, 'get');
        const preventDefault = jest.fn();
        const _onUnderlineClick = jest.fn();

        spy.mockImplementation(async() => await act(() => Promise.resolve({ data: responseData })));
        const component = mount( <Provider store= {store}>
            <AnnouncementsTab  /> </Provider>);

        component.update();   

        // expect(component.find('button')).toHaveLength(6);
        // expect(component.find('.text-button-style')).toHaveLength(3);

        await component.find('.text-button-style').at(0).invoke('onMouseDown',{ preventDefault })(
            {
              nativeEvent: {
                preventDefault,
                e: jest.fn(),
                _onUnderlineClick: (e)=>{}
              }
            },
            1000
          )           
    });

Answer 1

The function signature is .invoke(invokePropName)(...args) => Any . There is NO second parameter for .invoke() method. You should pass the mocked event object to the returned function of .invoke() .

Eg

MyComponent.jsx :

import React from 'react';

export function MyComponent() {
  const _onBoldClick = (e) => {
    e.preventDefault();
  };

  return (
    <button
      className="text-button-style"
      onMouseDown={(e) => {
        _onBoldClick(e);
      }}
    >
      B
    </button>
  );
}

MyComponent.test.jsx :

import { mount } from 'enzyme';
import React from 'react';
import { MyComponent } from './MyComponent';

describe('67817812', () => {
  it('onmousedown U button', async () => {
    const preventDefault = jest.fn();
    const component = mount(<MyComponent />);

    component.find('.text-button-style').at(0).invoke('onMouseDown')({ preventDefault });
    expect(preventDefault).toBeCalledTimes(1);
  });
});

test result:

 PASS  examples/67817812/MyComponent.test.jsx (7.766 s)
  67817812
    ✓ onmousedown U button (36 ms)

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |     100 |      100 |     100 |     100 |                   
 MyComponent.jsx |     100 |      100 |     100 |     100 |                   
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.754 s, estimated 9 s