指南
教程
配置
API
博客
指南
教程
配置
API
博客
简体中文

render

用于在测试用例中渲染组件，完成测试。

使用姿势

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

函数签名

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;

参数

  • ui：需要被渲染的 React 组件。
  • options：render 可选配置。
    • container：表示组件所要挂载到的 DOM 节点，默认是会创建一个 div 元素，并自动添加到 document.body 上。这个 div 元素就是组件要挂载的节点。默认值是 document.body.append(document.createElement('div'))。
    • baseElement：用于指定 queries 中使用到的 basename。如果指定了 container, 则默认值为 container 的值，否则就是 document.body。
    • hydrate：如果设置为 true，则会使用 ReactDOM.hydrate 渲染组件。默认值为 false。
    • wrapper：是一个 react 组件，可用于自定义渲染逻辑。
    • queries：自定义一些自己的 queries。

返回值

  • {...queries}：所有可用的 queries。
  • container：挂载 React 组件的 DOM 节点。
  • baseElement
  • debug
  • rerender：如果想测试一个已渲染的组件在其 props 更新时的一些场景，可以使用 rerender 来现实。
  • unmount：会卸载掉已渲染的组件。如果想测试组件卸载后的情况（如，绑定的事件是否在 unmount 阶段被卸载掉），那么这个 API 是很帮助的。
  • asFragment：返回当前渲染的组件的 DocumentFragment 对象。可用于测试 react 事件触发后 DOM 结构的响应。

示例

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>
  `);
});
,