mercredi 29 juin 2016

Using Mocha to test higher order components in React

I am using a HOC in a React component that looks like:

import React from 'react';
import Wrapper from 'wrapper';
class Component extends React.Component {
  render () {
    return (
      <div className='component' />
    )
  };
}
export default Wrapper(Component)

When testing Component using Mocha I am attempting to look for a class name that should be contained within Component. Like so:

describe('Component', function () {
  it('can be mounted with the required class', function () {
    const component = shallow(
      <Component />
    );
    expect(component).to.have.className('component');
  });
});

The problem is that Mocha doesn't know to look within the wrapper for the Component and attempts to find it in the HOC. Which of course it will not.

The error I am receiving is:

AssertionError: expected <Wrapper(Component) /> to have a 'component' class, but it has undefined
     HTML:

     <div class="component">
     </div>

How do I tell Mocha to look within the HOC for the correct location of the class name instead of the HOC itself?

Aucun commentaire:

Enregistrer un commentaire