Skip to content

Latest commit

 

History

History
91 lines (72 loc) · 2.54 KB

render.md

File metadata and controls

91 lines (72 loc) · 2.54 KB
Raw

渲染相关 API

mount

组件挂载

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

params 类型 TParams

参数 类型 必须 默认值 说明 备注
props Object {} props 入参
slots Object {} slots 入参 vue 特有
container HTMLElement div 挂载容器节点
baseElement HTMLElement document.body 打印出来的节点
baseElement HTMLElement document.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">...
})