should-jsx

Should JSX Extensions

should-jsx provides JSX-comparison assertions for should.js. This allows simple and less fragile assertions of the output of a JSX render e.g. when using the React TestUtils shallow renderer. Lifted almost in its entirety from expect-jsx, so credit to that module's author.

Installation

Install via npm. Note that should-jsx has should as a peer dependency, so you'll need to install both to use this, e.g.

npm install should should-jsx --save-dev

Usage

Just import should-jsx after your import should, and it will add the JSX assertions to the should instance. Then when

import should from "should";
import "should-jsx";
import TestUtils from "react-shallow-test-utils";
 
import {MyComponent} from "../some/component";
 
// Example with Mocha, but this applies anywhere should.js is used
describe("MyComponent", () => {
  it("should have a thing", () => {
    let renderer = TestUtils.createRenderer();
    renderer.render(<MyComponent {...this.props} />);
    let output = renderer.getRenderOutput();
 
    // Exact comparison of shallow rendered content (e.g. one level deep).
    output.should.equalJSX(
      <div className="my-component">
        <h1>Hello, World</h1>
      </div>
    );
 
    // Match partial content to decouple your tests from HTML structure
    output.should.includeJSX(
      <h1>Hello, World</h1>
    );
 
    // Standard should.js style negation
    output.should.not.includeJSX(
      <h2>Goodbye, cruel world</h2>
    );
  });
});