Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jest.fn() value must be a mock function or spy received function: [Function getTemplates]

I have a function in module called handlelistOfTemplates which calls actions defined in another file. I want to test when handlelistOfTemplates is called the function in actions file is called with correct parameters.

My container component :

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

import * as getData from '../../services/DataService';

class Container extends React.Component {

    constructor(props){
        super(props) 
        this.props.actions.getTemplates(1);
        this.state = {
            value: 1
        }

    }

    handlelistOfTemplates = (template, index, value) => {
        this.props.selectedTemplate(template);
        this.setState({ value });
        this.props.actions.getTemplates(template);
    };

    componentDidMount() {
    }

    render() {
        return(

                <ListOfTemplates listOfTemplates={this.props.listOfTemplates} value={this.state.value} onChange={this.handlelistOfTemplates}/>
            );
    }
}
function mapStateToProps({state}) {
    return {
        listOfTemplates: state.listOfTemplates
    }
}
function mapDispatchToProps(dispatch) {
    return {
    actions: bindActionCreators(getData, dispatch)
    };
   }
module.exports = connect(mapStateToProps, mapDispatchToProps)(Container);

And my test :

import React from 'react';
import sinon from 'sinon';
import expect from 'expect';
import { shallow } from 'enzyme';
import PropTypes from 'prop-types';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { createMockStore, createMockDispatch } from 'redux-test-utils';

import Container from './Container';
const shallowWithStore = (component, store) => {
    const context = {
        store,
        muiTheme: getMuiTheme(),
    };

    const childContextTypes = {
        muiTheme: React.PropTypes.object.isRequired,
        store: PropTypes.object.isRequired
    }
    return shallow(component, { context, childContextTypes });
};
let store;
const loadComponent = (testState) => {

    const props = {
        actions: {
            getTemplates: () => {return Promise.resolve()}
        }
    }
    store = createMockStore(testState)
    return shallowWithStore(<Container {...props}/>, store);
}

const getFakeState = () => {
    return {
        listOfTemplates: [],

    };
}

describe('Container', () => {
    let testState, component;


    describe("when Appeal template is selected from select template dropdown", () => {
        beforeAll(() => {
            testState = getFakeState();
            component = loadComponent(testState);

        });

        fit('should update the content in editor', (done) => {
            component.dive().find('ListOfTemplates').props().onChange('Appeal', 1, 2);
            component.update();
            done();
            expect(component.dive().state().value).toEqual(2) // error value still is at 1
expect(component.instance().props.actions.getTemplates).toHaveBeenCalled();

        });
    });
});

When I run the above test I get the following error.

expect(jest.fn())[.not].toHaveBeenCalled()

    jest.fn() value must be a mock function or spy.
    Received:
      function: [Function getTemplates]

Is there something else I should be running to get this to work ?may be my mock is not correct.

even i tried doing this : jest.spyon(component.instance().props.actions, 'getTemplates'); before expect the error remains same.

Also, when i checking the component's local state has been modified or not. I'm not getting the updated state. when i call component.dive().find('ListOfTemplates').props().onChange('Appeal', 1, 2);

the component.dive().state().value should become 2 but it is 1 instead.

Could you please help me where i'm doing wrong?

like image 995
Sinha Avatar asked May 29 '18 12:05

Sinha


People also ask

What is the Jest fn () in Jest?

The jest. fn method allows us to create a new mock function directly. If you are mocking an object method, you can use jest.

How do you spy a function in Jest?

To spy on an exported function in jest, you need to import all named exports and provide that object to the jest. spyOn function. That would look like this: import * as moduleApi from '@module/api'; // Somewhere in your test case or test suite jest.

What does Jest mock () do?

Mock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturing instances of constructor functions when instantiated with new , and allowing test-time configuration of return values.

What is the difference between Jest FN and Jest mock?

mock replaces one module with either just jest. fn , when you call it with only the path parameter, or with the returning value of the function you can give it as the second parameter.


1 Answers

You should pass a Mock function getTemplate to your component, otherwise jest won't be able to check whether it was called or not.

You can do that like this: (notice jest.fn() )

 const props = {
        actions: {
            getTemplates: jest.fn(() => Promise.resolve())
        }
    }
like image 130
Hamza El Aoutar Avatar answered Sep 21 '22 03:09

Hamza El Aoutar