in React JS by
Q:

What is Shallow Renderer in React testing?

1 Answer

0 votes
by

Shallow rendering is useful for writing unit test cases in React. It lets you render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

For example, if you have the following component:

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

Then you can assert as follows:

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'}</span>
])
Click here to read more about React JS
Click here to read more about Insurance

Related questions

0 votes
asked Jan 30 in React JS by rajeshsharma
0 votes
asked May 20, 2020 in React JS by GeorgeBell
0 votes
asked Mar 3, 2020 in React JS by miceperry
0 votes
asked Jul 2, 2019 in React JS by Venkatshastri
+1 vote
asked Mar 2, 2020 in React JS by RShastri
...