В чем разница между мелким и рендером в шутку?

Question

В шутку, в чем разница между использованием мелкого и рендера от фермента?

Вот пример обоих:

Тест рендеринга с мелкой:

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();
  });
});

Тестовый рендеринг с рендером

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();
  });
});

Какое типичное использование этих 2. Я написал все свои тесты с мелкой, я должен вернуться и изменить это для рендеринга в некоторых случаях?

Answer 1

shallow и render являются специфическими для фермента, который может использоваться независимо от Jest.

shallow отображает только компонент верхнего уровня и не требует DOM. Предназначен для изолированных модульных испытаний.

render отображает весь компонент, оборачивает его с помощью Cheerio, который является реализацией jQuery для Node.js. Он предназначен для интеграции в черный ящик / e2e с помощью jQuery-подобных селекторов. Возможно, он использует, но обычно используются shallow и mount.

Ни один из них не предполагается использовать с toMatchSnapshot, по крайней мере, без дополнительных инструментов (enzyme-to-json для shallow и mount).