跳到主要内容
版本:3.x

渲染相关 API

mount

组件挂载

async mount(component, params);
参数类型必须说明
componentFunctionComponent | ClassComponent需要挂载的组件
paramsTParams参数

params 类型 TParams

参数类型必须默认值说明备注
propsObject{}props 入参
slotsObject{}slots 入参vue 特有
containerHTMLElementdiv挂载容器节点
baseElementHTMLElementdocument.body打印出来的节点
baseElementHTMLElementdocument.body打印出来的节点

用法:

import testUtils from '@tarojs/test-utils-react' // react
// import testUtils from '@tarojs/test-utils-vue3' // vue3
describe('测试mount', () => {
test('View', async () => {
const testUtils = new TestUtils()
await testUtils.mount(View, {
props: {
className: 'className',
children: 'Child Text!',
},
// Vue插入插槽
// slots: {
// default: 'Child Text!'
// }
})
})
})

unmount

组件卸载

unmount()

将组件进行卸载,会触发组件的卸载生命周期

用法:

await testUtils.mount(View)
// 挂载完成 => 卸载组件
testUtils.unmount()

createApp

构建应用

await createApp()

该 api 主要用于测试完整应用的表现功能,从入口开始进行渲染。 将会根据 Taro 项目入口进行应用渲染,读取app.config.(ts|js)配置内容,包括如 router 相关信息。

⚠️ 注意:这与真实表现可能存在差异,因为 createApp 为运行时渲染,而非渲染编译产物,所以一些编译插件对运行时的影响降无效

test('createApp', async () => {
await testUtils.createApp()
// 监听/pages/index/index这个页面路由的onShow生命周期触发
await testUtils.PageLifecycle.onShow('/pages/index/index')
// 跳转到第二个页面
Taro.navigateTo({ url: '/pages/second/index' })
// 监听/pages/second/index这个页面路由的onShow生命周期触发
await testUtils.PageLifecycle.onShow('/pages/second/index')
// 当/pages/second/index触发onShow后,打印页面内容
expect(testUtils.html()).toMatchSnapshot()
// <body><div class="taro_router" id="app">...
})