Tests to examine property and state?

[ezmiller]

I've looked over your library. I like the diff-ing output and the syntax makes is nicely expressive. The ability to use JSX is also great! But comparing this library with airbnb's enzyme, I wondered whether there is a way to examine the setup of the component for example testing for state and prop values and so on. Enzyme has the state() and props methods...

[ezmiller]

Looking a bit more closely I see that one way to do this is just to access for example the props object on the rendered component object returned by TestUtils.renderIntoDocument:

describe('HelloWorld', () => {
  let component;

  it('should render correctly', () => {
    component = TestUtils.renderIntoDocument(<HelloWorld name={'Sally'} />);            
    expect(component.props, 'to have keys', ['name']);
  });

});

That's just fine. I wonder though if it might be a good idea, if possible, to change unexpected-react so that one could use enzyme's mount and shallow functions, something like a unexpected-react-enzyme? That way one could use all those helper functions that enzyme exposes...?

What I mean is that I could potentially get the benefits of unexpected (JSX and the nice diff-ing) if I could use enzyme's render methods with the unexpected and unexpected-react assertion libraries.

Upon looking a bit more, however, this can work if I use enzyme's mount and then on the result pull out the RenderComponent object with component.node, like so:

describe('HelloWorld', () => {
  let component;

  beforeEach(() => {
    component = mount(<HelloWorld name={'Sally'} />);
  });

  it('should render correctly', () => {
    console.log(component);
    expect(component.node, 'to contain', <h3>Hello, Sally!</h3>);
  });

});

Perhaps this just needs a helper function of some sort, or just to be made explicit in the documentation?

[bruderstein]

So in this case mount is nothing more than a helper for TestUtils.renderIntoDocument? And it's actually pretty much const mount = TestUtils.renderIntoDocument (maybe bound to TestUtils, not sure). shallow is pretty similar, maybe 2 lines.

Not sure how useful that is?

[ezmiller]

Hi @bruderstein just picking this up again. I didn't follow though. You aren't sure how useful what is?

[bruderstein]

Ahhhh...

This is actually available now:

expect(<MyComponent />, 
  'when rendered', 
  'with event', 'click', 
  'to have rendered', <button>Clicked once</button>
);

Or as a short form if you just want to check the render:

expect(<MyComponent />, 
  'to render as',
  <button>Not yet clicked</button>
);

Use 'when deeply rendered' or 'to deeply render as' to render using the full DOM renderer

[bruderstein]

Anything else you'd need?

[ezmiller]

Nope, thanks! Curious though what when rendered is doing under the hood...