queried for

  • <RenderedPreactElement> queried for [with all children] [with all wrapppers] [with all classes] [with all attributes] <PreactElement> <assertion?>
  • <RenderedPreactElement> queried for [exactly] <PreactElement> <assertion?>

This enables finding a particular component or element, to then perform further assertions on.

e.g.

 
expect(
  <TodoList>
    <TodoItem id={1} label="Buy flowers"/>
    <TodoItem id={2} label="Mow the lawn"/>
    <TodoItem id={3} label="Buy groceries"/>
  </TodoList>,
  'when rendered',
  'queried for',
  <div className="item">
     <span className="id">{3}</span>
  </div>,
  'to have rendered', 
  <div>
    <span>Buy groceries</span>
  </div>
);

Here we're searching for a div representing a todo item with the id 3. Because props are checked with to satisfy, extra data in this object is ignored.

You can use to have rendered or to contain with all the options as usual following a queried for.

It is also possible to extract the found component, by using the value of the returned promise from expect.

return expect(
    <TodoList>
      <TodoItem id={1} label="Buy flowers"/>
      <TodoItem id={2} label="Mow the lawn"/>
      <TodoItem id={3} label="Buy groceries"/>
    </TodoList>,
    'when rendered',
    'queried for', 
    <TodoItem id={3} />
  ).then(todoItem => {
      expect(todoItem.props.label, 'to equal', 'Buy groceries');
  });

queryTarget

If you want to find a target nested inside a parent element, use queryTarget in the query. e.g. This queried for clause returns the span inside the TodoItem

expect(
    <TodoList>
      <TodoItem id={1} label="Buy flowers"/>
      <TodoItem id={2} label="Mow the lawn"/>
      <TodoItem id={3} label="Buy groceries"/>
    </TodoList>,
  'queried for',
  <TodoItem id={3}>
    <div>
      <span className="label" queryTarget />
    </div>
  </TodoItem>,
  'to have rendered',
  <span className="label">Buy groceries</span>
);