Mocha, Enzyme: Unit testing custom functions in react component using enzyme Mocha, Enzyme: Unit testing custom functions in react component using enzyme reactjs reactjs

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.