7

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?

1 Answer 1

2

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())
        }
    }
2
  • Thank you for your quick response. I'l still getting error with your suggested change. Error --- TypeError: received.getMockName is not a function at Object.<anonymous> (src/containers/Container.spec.js:183:169) at new Promise (<anonymous>) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7)
    – Sinha
    May 29, 2018 at 13:19
  • What's is getTemplateContent in your tests? May 29, 2018 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.