I recently wanted to test that some custom method gets called in the componentDidMount method of a React component.
componentDidMount() {
this.props.actions.getDocuments();
}
I'm using Jest as my testing framework, which includes jest.fn() for mocks/spies
function setup(data) {
const props = {
session: {},
actions: {
getDocuments: jest.fn()
}
};
const wrapper = mount(<ComponentList {...props} />,
{
context: { muiTheme: getMuiTheme() },
childContextTypes: { muiTheme: React.PropTypes.object.isRequired }
}
);
return {
props,
wrapper
};
}
describe('compenent:', () => {
let component;
describe('Given that the container is loaded', () => {
beforeAll(() => {
component = setup();
});
it('should call the getDocuments to get the data', () => {
expect(component.props.actions.getDocuments).toHaveBeenCalled();
});
});
});
This code fails and throws the following error:
TypeError: received.getMockName is not a function
at Object.<anonymous> (src/containers/ComponentList/ComponentList.spec.js:61:158)
at new Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
If i use sinon instead of jest, i still get the error :
expect(jest.fn())[.not].toHaveBeenCalled()
jest.fn() value must be a mock function or spy.
Received:
function: [Function proxy]
at Object.<anonymous> (src/containers/ComponentList/ComponentList.spec.js:61:158)
at new Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
Is it possible to test this functionality with Jest or Sinon? And if so, how?
Here is my code implementation:
export class ComponentList extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
this.props.actions.getDocuments();
}
render() {
return (
<div className="allowScroll">
....
</div>
)
}
}
ComponentList.propTypes = {
document: PropTypes.object,
actions: PropTypes.object.isRequired
};
const mapStateToProps = (state) => {
return {
document: state.document
}
};
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(componentActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ComponentList)
Aucun commentaire:
Enregistrer un commentaire