Mocha, Enzyme: Unit testing custom functions in react component using enzyme
The best answer to this question really depends on what it is that customFunction
is actually doing...
You can call the function like this:
wrapper.instance().customFunction('foo', 'bar');
If it's a function that sets state on the instance itself, and thus affects what the rendered output looks like, you may want to call .update()
as well
wrapper.instance().customFunction('foo', 'bar'); // uses setState internallywrapper.update(); // updates render tree// do assertions on the rendered output
You can also use the chai plugin to spy on custom functions in you jsx file.
// to use this pluggin add this to the top of your testing fileconst chai = require("chai"), spies = require("chai-spies");chai.use(spies);import Foo from "./<path to component>/Foo.jsx";describe("Foo", () => { it("a call to customFunction will not error", () => { let spy = chai.spy(Foo.prototype, "customFunciton"); // spy const wrapper = mount(<Foo/>); wrapper.setProps({bar: "baz"}); // manipulate you component in some way expect(spy).to.have.been.called.once(); });});
@leland-richardson is right, it depends on what your test is doing. Understanding that will help you compose new ways to manipulate your component and thus make assertions.
Another example testing a function that updates your components state.
it("function will assert new state", () => { const wrapper = shallow(<Foo {...props}/>); wrapper.instance.customFunction(); // call custom function wrapper.update(); expect(wrapper.state("bar")).to.equal("new-state");});
Chai-spies also has a handful of chainable getters that make testing custom functions much easier. Please see the docs for a more in-depth explanation.