queried for

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

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

e.g.

var TestRenderer = require('react-test-renderer');
var renderer = TestRenderer.create(
  <TodoList>
    <TodoItem id={1} label="Buy flowers for the wife"/>
    <TodoItem id={2} label="Mow the lawn"/>
    <TodoItem id={3} label="Buy groceries"/>
  </TodoList>
);
 
expect(
    renderer, 'queried for', 
    <div id="todo-3" />,
    'to have rendered', 
    <div>
      <span>Buy groceries</span>
    </div>
);

Here the TodoList component is rendering a list of todo items. Here we're querying for the todo item with the id 3 and then we check that it has the expected text. This example show how you only mention exactly what you are searching for. If the assertion finds a match it is forwarded to the next assertion; otherwise it fails with a helpful message.

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

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 input element inside the div with the class add-new-item.

expect(renderer, 'queried for', <div className="add-new-item"><input queryTarget /></div>,
    'to have rendered', <input placeholder="Enter something to do" />);