render
补充信息
用于在测试用例中渲染组件,完成测试。
import { render } from '@modern-js/runtime/testing';
API
render(ui, [options]) => RenderResult
参数
- ui:
React.ReactElement<any>
,需要被渲染的 React 组件。 - [options]:
object
,render 可选配置。- container:
DOMElement
,表示组件所要挂载到的 DOM 节点,默认是会创建一个div
元素,并自动添加到document.body
上。这个div
元素就是组件要挂载的节点。默认值是document.body.append(document.createElement('div'))
。 - baseElement:
DOMElement
,用于指定queries
中使用到的basename
。如果指定了container
, 则默认值为container
的值,否则就是document.body
。 - hydrate:
boolean
,如果设置为true
,则会使用 ReactDOM.hydrate 渲染组件。默认值为false
。 - wrapper:
React.ComponentType<{children: ReactNode}>
,是一个 react 组件,可用于自定义渲染逻辑。 - queries:
any
,自定义一些自己的queries
。
- container:
返回值
- {...queries}:
any
, 所有可用的 queries。 - container:
DOMElement
,container
是挂载 React 组件的 DOM 节点。 - baseElement:
DOMElement
。 - debug:
function
。 - rerender:
function
,如果想测试一个已渲染的组件在其 props 更新时的一些场景,可以使用 rerender 来现实。 - unmount:
function
,会卸载掉已渲染的组件。如果想测试组件卸载后的情况(如,绑定的事件是否在 unmount 阶段被卸载掉),那么这个 API 是很帮助的。 - asFragment:
function
,返回当前渲染的组件的 DocumentFragment 对象。可用于测试 react 事件触发后 DOM 结构的响应。
示例
import { render } from '@modern-js/runtime/testing';
test('renders a message', () => {
const { container, getByText } = render(<Greeting />)
expect(getByText('Hello, world!')).toBeInTheDocument()
expect(container.firstChild).toMatchInlineSnapshot(`
<h1>Hello, World!</h1>
`)
})