What is the difference between shallow & render in jest?

Question

In jest, what is the difference between using shallow & render from enzyme?

Here is an example of both:

Test rendering with shallow:

import "jest";
import * as React from "react";
import { shallow } from "enzyme";
import Item from "../item.component";

describe("Item", () => {
  it("renders correct", () => {
    const item = {
        name: "A"
      };

    const component = shallow(
      <Item item={item}/>
    );

    expect(component).toMatchSnapshot();
  });
});

Test rendering with render

import "jest";
import * as React from "react";
import { render } from "enzyme";
import Item from "../item.component";

describe("Item", () => {
  it("renders correct", () => {
    const item = {
        name: "A"
      };

    const component = render(
      <Item item={item}/>
    );

    expect(component).toMatchSnapshot();
  });
});

What are the typical usage of these 2. I wrote all my tests with shallow, should I go back and change that to render in some cases?

Check this: https://stackoverflow.com/questions/38710309/when-should-you-use-render-and-shallow-in-enzyme-react-tests — Rakesh Makluri, Jan 17 '19 at 12:45

score 7 · Accepted Answer · edited Jul 31 '23 at 18:20

shallow and render are specific to Enzyme, which can be used independently of Jest.

shallow renders only the top-level component and doesn't require a DOM. It is intended for isolated unit tests.

render renders the entire component and wraps it with Cheerio, which is a jQuery implementation for Node.js. It is intended for blackbox integration/e2e tests with the aid of jQuery-like selectors. It may have its uses but shallow and mount are commonly used.

Neither of them is supposed to be used with toMatchSnapshot, at least not without additional tools (enzyme-to-json for shallow and mount).

What is the difference between shallow & render in jest?

1 Answers1