CODEWITHSUNDEEP
unit-testingreactjs
Talin
Talin

Reputation: 1415

React components that use context are painful to unit test

React doesn't provide an API that lets you pass in context to a created component class, so you have to write a wrapper component that provides the context.

Unfortunately, once you do this, you no longer have direct access to the component you are trying to test - unlike TestUtils.renderIntoDocument, functions like TestUtils.findRenderedComponentWithType don't return the actual rendered component instance, they only return the component constructor. Thus you can't call methods on the component, or set the component state to some known value before executing the test. The only thing you really have access to is the DOM node for your component, which is fine if all you want to do is black box testing, but for some kinds of components that's not sufficient.

I'm curious to know if anyone has come up with a solution for this. I've tried about a dozen different approaches, none of which work. (For example, I tried using 'ref' in my wrapper component, but it has the same problem - doesn't give you access to the real object.)

Upvotes: 2

Views: 1944

Answers (2)

Talin
Talin

Reputation: 1415

(Answering my own question)

Turns out the correct answer to all of this is to use enzyme, which replaces the standard React test utils - it offers a ton of features with a jQuery-like API, and best of all it completely supports component contexts. I've switched all of my tests over to it and it's great!

Upvotes: 3

Marty
Marty

Reputation: 2963

You can build a mock parent component like:

class MockContextContainer extends Component {
  static propTypes = {
    children: PropTypes.element.isRequired,
  };
  static childContextTypes = {
    onSetTitle: PropTypes.func,
  };
  getChildContext() {
    return {
      onSetTitle: () => {},
    };
  }
  render() {
    return this.props.children;
  }
}

Then use it in your test (in this case its a forgot password form example):

const cxtForgot = TestUtils.renderIntoDocument(
      <MockContextContainer><ForgotPasswordForm /></MockContextContainer>
);

Which is what you may already be doing. You can then do things like:

const input = TestUtils.findRenderedDOMComponentWithClass(
      cxtForgot, 'ForgotPasswordForm-input'
);

// enter a valid email
input.value = '[email protected]';

TestUtils.Simulate.change(input);

// no error class and button is now enabled
assert(!input.classList.contains('error'));
const button1 = TestUtils.findRenderedDOMComponentWithClass(
    cxtForgot, 'primary-button'
);
assert(!button1.disabled);

the Simulate.change above can change the internal state of the component. As for you question: "set the component state to some known value before executing the test", you can pass in different props to the component and have different tests for each scenario

Upvotes: 0

Related Questions