top of page
Logo der Online Agentur mdwp

Shallow rendering

Shallow rendering is a concept in React JS used for writing tests. It is a feature provided by the 'Enzyme' library, a testing utility for React developed by Airbnb. Enzyme mimics jQuery's API for DOM manipulation and traversal.

Shallow rendering is used for unit testing individual React components. Unlike other methods such as mount and render, shallow rendering tests only a single component as a unit, not within the DOM or a parent component. This means it doesn't deeply render child components of the component being tested. This type of rendering is very useful while writing tests for complex components, because it allows the developer to focus solely on the component's behavior rather than the behavior of its child components.

Here's an example of a code snippet using shallow rendering in a test:

import { shallow } from 'enzyme';
import SomeComponent from './SomeComponent';

describe('<SomeComponent />', () => {
it('renders without crashing', () => {
shallow(<SomeComponent />);

In this code snippet, the `shallow` function from the enzyme library is used to shallow render the `SomeComponent`. This will create a simple version of the `SomeComponent` and allow you to execute some assertions or actions for testing this component separately from any of its potentially more complex child components.

bottom of page