Testing function called as a parameter of another function

🐛 Bug Report

I am trying to test that a function is called and has a function as parameter. Trying to test it with a react component that is dispatching an action.

Here is the code of the component

import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';

import { startToggleTodo } from 'Actions/actions';

export class Todo extends React.Component {
    constructor(props) {
        super(props);
  
        this.onClick = this.onClick.bind(this);
    }

    onClick(event) {
        this.props.dispatch(startToggleTodo(this.props.id, !this.props.completed));
    }

    render() {
        ...
        return (
            <li className={ `list-group-item ${this.props.completed ? 'completed' : ''}` } onClick={ this.onClick }>
                ...
            </li>
        );
    }
};

export default connect()(Todo);

And here is my test

import React from 'react';
import { shallow } from 'enzyme';

import { Todo } from 'Todo';
import { startToggleTodo } from 'Actions/actions';

describe('Todo', () => {
    ...
    it('should dispatch TOGGLE_TODO action on click', () => {
        var todoData = {
            id: 199,
            text: 'Test features',
            completed: true
        };

        var action = startToggleTodo(todoData.id, !todoData.completed);

        var spy = jest.fn();
        var TodoTest = shallow(<Todo { ...todoData } dispatch={ spy } />);

        TodoTest.find('li').simulate('click');

        expect(spy).toHaveBeenCalledWith(action);
    });
});

And I get this message from the test:

To Reproduce

Just create a component like above and a test too. The action called is just a regular function that receives 2 parameters. Dispatch should be called with that function. Don’t know if I am testing it the wrong way. Don’t know if it is relevant but I am running the tests in npm with the following; jest --verbose --setupFiles ./jest.config.js

Here is the action if needed

import moment from 'moment';

import firebase, { firebaseRef } from './../firebase/index';

...

export const updateTodo = (id, updates) => {
    return {
        type: 'UPDATE_TODO',
        id,
        updates
    };
};

export const startToggleTodo = (id, completed) => {
    return (dispatch, getState) => {
        var todoRef = firebaseRef.child(`todos/${id}`);
        var updates = {
            completed,
            completedAt: completed ? moment().unix() : null
        };

        return todoRef.update(updates).then(() => {
            dispatch(updateTodo(id, updates));
        });
    };
};

Expected behavior

I expect the function to be called and the test to pass. When I test in the browser it works as expected.

Link to repl or repo (highly encouraged)

I don’t have a public repo. If is really needed I can create one.

Run npx envinfo --preset jest

Paste the results here:

System:
  OS: Windows 10
  CPU: x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Binaries:
  npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD

[SimenB]

You can use .toHaveBeenCalledWith(expect.any(Function)). Not sure if the assertion error could be improved? Saying something like ‘function equality’ blah blah

[killerchip]

I don’t if my solution is fully correct but what I do is turn functions to .toString() and compare their values.

I want to test if a dispatch was called with a specific ‘thunk’ so I do expect(mockedStore.dispatch.mock.calls[0][0].toString()).toBe(userLogout().toString())

Up to now it works for me.