Shallow rendering

Why Shallow Rendering?

Shallow rendering is better than mounting or general rendering as it is faster. It concentrates on the unit tests of a specific component without impacting its children or any linked components. Even if any child components test cases fail, they don’t impact the tests of the parent component if we use shallow rendering. So shallow() rendering is better and faster than mount() for isolated testing and rendering, but if you want to test the lifecycle hooks, you have to use mount() instead of render, as the hooks might need other components to be included too.

Shallow Wrapper API

The shallow wrapper API is used to render the components on lifecycle methods and mounting methods. It provides us with different functions in the wrapper class for rendering. Let’s learn how to code for a shallow wrapper rendering.

import { shallow } from 'enzyme';
import sinon from 'sinon';
import App from './App;

describe('<MyComponent />', () => {
  it('renders three <App /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(App)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<App onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

We imported the shallow method from the enzyme and our component App in the above code. We grouped all the functions and elements in the component. We gave different conditions for rendering like rendering the components, rendering the icons, rendering the children, and rendering the click events individually using the it() function. The wrapper API methods in our code perform the rendering and different functions. Let’s discuss a few methods with their descriptions.

FAQs

1. What is shallow rendering?
   Shallow rendering is a technique where you test a component as a unit and ensure that your tests aren't indirectly asserting the functionality of child components.
    
2. Is Shallow rendering better than mounting?
   Shallow rendering is better than mounting in terms of components dependency and speed. But if you want to test all the components and methods, you have to use Shallow wrapper API or mounting.
    
3. Does shallow render call componentDidMount?
   Yes, the Shallow API calls componentDidMount and other life cycle hooks along with click events. So you can render most of the elements in your code using shallow API.
    
4. What is a Shallow wrapper?
   The shallow wrapper API is used to render the components on lifecycle methods and mounting methods. It provides us with different functions in the wrapper class for rendering. 
    
5. What does the getRenderOutput() method do?
   The getRenderOutput() method gives you the output of shallow rendered elements. It is called after you call render() method, which isolates the component from its children.

Key Takeaways

We discussed the concept of shallow rendering and Enzyme. We have also learned a few examples of the code that you can use to test only a portion of the code and not the whole application. Then we discussed the shallow Wrapper API and the methods provided by it.

Hey Ninjas! We hope this blog helped you enhance your knowledge of shallow rendering. If you want to learn more, check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems. Do upvote our blog to help the other ninjas grow.

Happy Learning!