Result

The rendered result contains a handful of methods and properties for asserting against, they are:

root

Element\

The React element passed to render, represented as an Element instance. This is the entry point into the entire rendered React tree.

const { root } = render<ButtonProps>(<Button>Save</Button>);
expect(root).toContainNode('Save'); // true

If either strict or wrapper options are defined, the root will still point to the element initially passed in.

debug()

Result#debug(options?: DebugOptions): string

Logs or returns a JSX representation of the reconciled React component tree. By default this will log to the console.

const { debug } = render<ButtonProps>(<Button>Save</Button>);
debug();
const out = debug({ log: false });

The example above would log something similar to the following.

<Button>
<button type="button">Save</button>
</Button>

This function logs the reconciled tree. What this means is that exotic components, like context consumers and providers, memo, fragments, and more, will not be shown. Only the "result" of the render.

Options

  • children (boolean) - Render children. Defaults to true.

  • excludeComponents (RegExp) - Exclude all components by name that match the regex pattern.

  • excludeProps (RegExp) - Exclude all props by name that match the regex pattern.

  • falsy (boolean) - Include falsy props in the output. Defaults to false.

  • groupProps (boolean) - Group props into the following: key & ref, truthy booleans, everything

    else, event handlers. Defaults to true.

  • hostElements (boolean) - Include host elements (DOM) in the output. Defaults to true.

  • keyAndRef (boolean) - Include key and ref props in the output. Defaults to true.

  • log (boolean) - Log to the console automatically. Defaults to true.

  • maxLength (number) - Max length of arrays and objects before truncating. Defaults to 5.

  • reactElements (boolean) - Include React elements in the output. Defaults to true.

  • sortProps (boolean) - Sort the props within each grouping from A-Z. Defaults to true.

rerender()

SyncResult#rerender(element: React.ReactElement\, options?: RendererOptions): Element\

Re-render the in-memory tree with an updated root element and optional options, and return the new root element. This is a perfect opportunity to update or replace the wrapper element.

const { root, rerender } = render<InputProps>(<Input name="email" />, {
wrapper: <Form method="GET" />,
});
// Change props and wrapper
const newRoot = rerender(<Input name="email" id="email" />, {
wrapper: <Form method="POST" />,
});

If you don't destructure the result, you may use the root on the initial returned result, instead of using the new root, as the instance is preserved.

const result = render<InputProps>(<Input name="email" />, {
wrapper: <Form method="GET" />,
});
result.rerender(<Input name="email" id="email" />, {
wrapper: <Form method="POST" />,
});
result.root; // Latest

This method is not available when using renderAndWait().

rerenderAndWait()

async AsyncResult#rerenderAndWait(element: React.ReactElement\, options?: RendererOptions): Promise\>

Like rerender() but also awaits the re-render so that async calls have time to finish.

const { root, rerenderAndWait } = await renderAndWait<InputProps>(<Input name="email" />, {
wrapper: <Form method="GET" />,
});
// Change props and wrapper
const newRoot = await rerenderAndWait(<Input name="email" id="email" />, {
wrapper: <Form method="POST" />,
});

This method is not available when using render().

update()

Result#update(newProps?: Partial\, newChildren?: React.ReactNode): void

Can be used to update the root's props or children. When passing no arguments, will re-render the element with current props and children (useful for testing cache and conditionals).

const { update } = render<ButtonProps>(<Button type="button">Save</Button>);
update(); // Re-render

Otherwise, accepts an object of partial props as the first argument, or a new child as the second. Can be used separately or together.

// Change `type` prop
update({ type: 'submit' });
// Change children
update({}, <span>Submit</span>);
// Change both
update({ type: 'submit' }, <span>Submit</span>);

updateAndWait()

async Result#updateAndWait(newProps?: Partial\, newChildren?: React.ReactNode): Promise\

Like update() but waits for async calls within the updating phase to complete before returning the re-rendered result. Because of this, the function must be awaited.

const { root, updateAndWait } = render<UserListProps>(<UserList />);
expect(root.find(User)).toHaveLength(10);
await updateAndWait({ filters: { inactive: true } });
expect(root.find(User)).toHaveLength(3);

unmount()

Result#unmount(): void

Like the name states, this triggers an unmount. This isn't necessary to call in every test, just when you want to test the unmounting phase.

const { unmount } = render<ButtonProps>(<Button>Save</Button>);
unmount();