玩笑中的“shallow”和“render”有什么区别？

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

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

这些的典型用法是什么 2.我用浅层编写了所有测试，我应该返回并更改它以在某些情况下进行渲染吗？

Answer 1

shallow和render特定于 Enzyme，可以独立于 Jest 使用。

shallow仅渲染顶级组件，不需要 DOM。它用于隔离单元测试。

render渲染整个组件并用 Cheerio 包装它，Cheerio 是 Node.js 的 jQuery 实现。它旨在借助类似 jQuery 的选择器进行黑盒集成/e2e 测试。它可能有其用途，但shallow被mount广泛使用。

它们都不应该与 一起使用toMatchSnapshot，至少在没有附加工具的情况下不能使用（enzyme-to-jsonforshallow和mount）。