开发者社区> 问答> 正文

#React 什么是React测试中的Shallow Renderer?

#React 什么是React测试中的Shallow Renderer?

展开
收起
因为相信,所以看见。 2020-05-07 20:32:05 533 0
1 条回答
写回答
取消 提交回答
  • 阿里,我所有的向往

    浅层渲染对于在React中编写单元测试用例很有用。它使您可以更深层次地渲染组件,并断言其渲染方法返回的事实,而不必担心未实例化或渲染的子组件的行为。

    例如,如果您具有以下组件:

    function MyComponent() {
      return (
        <div>
          <span className={'heading'}>{'Title'}</span>
          <span className={'description'}>{'Description'}</span>
        </div>
      )
    }
    
    

    然后可以声明如下:

    import ShallowRenderer from 'react-test-renderer/shallow'
    
    // in your test
    const renderer = new ShallowRenderer()
    renderer.render(<MyComponent />)
    
    const result = renderer.getRenderOutput()
    
    expect(result.type).toBe('div')
    expect(result.props.children).toEqual([
      <span className={'heading'}>{'Title'}</span>,
    
    

    <span className={'description'}>{'Description'} ])

    2020-05-07 22:17:22
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载