用于在测试用例中渲染组件,完成测试。
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>
`);
});