to satisfy

  • <DOMElement> to [exhaustively] satisfy <DOMIgnoreComment>
  • <DOMElement> to [exhaustively] satisfy <DOMTextNode>
  • <DOMElement> to [exhaustively] satisfy <DOMElement>
  • <DOMElement> to [exhaustively] satisfy <ReactElement>
  • <DOMElement> to [exhaustively] satisfy <regexp>
  • <DOMElement> to [exhaustively] satisfy <object>
  • <DOMElement> to [exhaustively] satisfy <string>

An assertion to satisfy a DOMElement against a JSX structure.

This assertion just renders the JSX structure and uses unexpected-dom to compare the structures.

const React = require("react");
 
const Hello = ({ children }) => (
  <div>
    <span className="label">Hello</span>
    &nbsp;
    <span className="name">{children}</span>
  </div>
);
expect(
  <Hello>Jane Doe</Hello>,
  'when mounted',
  'to satisfy',
  <div>
    <span className="label">Hello</span>
    &nbsp;
    <span className="name">Jane Doe</span>
  </div>
)

The assertion allows you to leave out attributes you don't care about, or ignore complete sub-trees:

const { Ignore } = require('unexpected-reaction');
expect(
  <Hello>Jane Doe</Hello>,
  'when mounted',
  'to satisfy',
  <div>
    <Ignore/>
    &nbsp;
    <span>Jane Doe</span>
  </div>
)

In case of a failure, you will get a nice diff:

expect(
  <Hello>Jane Doe</Hello>,
  'when mounted',
  'to satisfy',
  <div>
    <Ignore/>
    &nbsp;
    <span className="fullname">Jane Doe</span>
  </div>
)
expected
<div>
  
<span class="label">Hello</span>
  
 
  
<span class="name">Jane Doe</span>
</div>
to satisfy <div><!-- ignore --><span class="fullname">Jane Doe</span></div>
 
<div>
  
<span class="label">Hello</span>
 
<span
  
class="name" 
//
 
expected [ 'name' ] to contain 'fullname'
>Jane Doe</span>
</div>