jest.fn() value must be a mock function or spy received function: [Function getTemplates]
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())
}
}
Related videos on Youtube
Sinha
Updated on June 11, 2022Comments
-
Sinha almost 2 years
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?