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?

Answer 1

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

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

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

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