When testing a React component, is there any way to directly call its non-lifecycle methods?

Question

I'm using Jest, and I have some component like:

var TestClass = react.createClass({
  foo: function() {
    return "test";
  },
  render: function() {
    return <div />;
  }
});

And I want to write a unit test specifically for TestClass' foo method.

I saw that Call a React component method from outside suggested this should be possible - simply render the component in the test and call it:

describe("TestClass", function() { 
    it("should access internal methods", function() { 
    var test = <TestClass />

    expect(test.foo()).toBeTruthy()
  }
});

From that question's answer I would expect this test to pass, but instead:

test.foo is not a function

Have I misunderstood that answer?

In general I would prefer to be able to test non-lifecycle methods in this manner - it would give better granularity, but if this is not possible, is there a sane alternative?

For example how might one test a method passed as props to a component's child without this ability?

I would guess that the variable `test` in your test is not an instance of the class but just the rendered component (or whatever the `.renderIntoDocument` returns). — Christian Gill, Mar 30 '16 at 14:46
That's what I get for slapping together a contrived example for stack overflow! Will edit — ttrmw, Mar 30 '16 at 16:37

score 0 · Answer 1 · answered Apr 03 '16 at 03:44

0

Use renderIntoDocument:

import ReactTestUtils from 'react-addons-test-utils';

...

const test = ReactTestUtils.renderIntoDocument(
  <TestClass />
);
expect(test.foo()).toBeTruthy();

answered Apr 03 '16 at 03:44

Anuj

1,474
12
23

document is not defined... This would only work in the browser. :\ – Kyle Baker Aug 27 '16 at 01:01
Correct - we are using renderIntoDocument from ReactTestUtils after all :) – Anuj Aug 27 '16 at 01:20

score 0 · Answer 2 · answered Nov 17 '16 at 13:33

If you are using enzyme instead of ReactTestUtils, and you are using enzyme's mount renderer, then you can call .instance() on the ReactWrapper to retrieve the ReactComponent.

var test = mount(
  <TestClass />
);

expect(test.instance().foo()).toBeTruthy();

When testing a React component, is there any way to directly call its non-lifecycle methods?

2 Answers2