jest/enzyme mock function in functional component

Here is a working example:

// ---- comp.js ----import * as React from 'react';import * as comp from './comp';export const remove = () => {  // ...do something}export const RemoveButton = (props) => (  <div onClick={() => comp.remove()}>    Remove  </div>);// ---- comp.test.js ----import * as React from 'react';import { shallow } from 'enzyme';import * as comp from './comp';describe('removeButton', () => {  it('should call remove on click', () => {    const mock = jest.spyOn(comp, 'remove');    mock.mockImplementation(() => {});    const component = shallow(<comp.RemoveButton />);    component.find('div').simulate('click');    expect(mock).toHaveBeenCalled();    mock.mockRestore();  });});

Note that to mock remove you need to export it and you need to import the module back into itself and use the import within your component.

Having said that, I agree that passing remove in as a prop is a better approach. It is much easier to test and makes your components more reusable.

You should pass the remove function as a prop, rather than just defining an adjacent variable that is private to a module.

const removeButton = (props) => (  <Button onClick={() => props.remove()}>    Remove  </Button>)// test fileit('test remove button', () => {  const mockFunction = jest.fn()  const test = shallow(<RemoveButton remove={mockFunction} />)  test.find('Button').simulate('click')  expect(mockFunction).toHaveBeenCalled()})