render#

Used to render the component in the test case.

Usage#

import { render } from '@modern-js/runtime/testing';

Function Signature#

type Options = {
  container: DOMElement;
  baseElement: DOMElement;
  hydrate: boolean;
  warpper: React.ComponentType<{children: ReactNode}>;
  queries: any;
};

type RenderResult = {
  {...queries}: any;
  container: DOMElement;
  baseElement: DOMElement;
  debug: function;
  rerender: function;
  unmount: function;
  asFragment: function;
}

function render(ui: React.ReactElement<any>, options: Options): RenderResult;

Input#

• ui: the React component that needs to be rendered.
• options: render options.
  • container: the dom which component mounted. by default create a div element, and auto append to document.body. the default value is document.body.append(document.createElement('div')).
  • baseElement: Used to specify the basename used in queries. If container is specified, the default value is the value of container, otherwise it is document.body.
  • hydrate: If set to true, the ReactDOM.hydrate rendering component is used. The default value is false.
  • wrapper: a react component that can be used to customize rendering logic.
  • queries: customize some own queries.

Return Value#

• {...queries}: all available queries.
• container: the DOM element that React component mounted.
• baseElement
• debug
• rerender: if you want to test some scene when a rendered component is updated, you can use rerender for reality.
• unmount: unmount rendered components. This API is helpful if you want to test what happens after the component is unmounted.
• asFragment: return the DocumentFragment of rendered component. used to test the response of the DOM structure after the react event is triggered.

Example#

import { render } from '@modern-js/runtime/testing';
import App from './App';

test('renders a message', () => {
  const { container, getByText } = render(<App />);
  expect(getByText('Hello, world!')).toBeInTheDocument();
  expect(container.firstChild).toMatchInlineSnapshot(`
    <h1>Hello, World!</h1>
  `);
});