在jest中浅层和渲染有什么区别？

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

这两种方法的典型用法是什么?我所有的测试都是用浅层写的，在某些情况下，我是不是应该回去把它改成渲染？

Answer 1

shallow和render是特定于酶的，可以独立于Jest使用。

shallow只呈现顶级组件，不需要DOM。它适用于独立的单元测试。

render呈现整个组件，并用Cheerio包装它，这是Node.js的jQuery实现。它旨在通过类似jQuery的选择器进行黑盒集成/e2e测试。它可能有它的用法，但通常使用shallow和mount。

它们都不应该与toMatchSnapshot一起使用，至少在没有其他工具的情况下是这样(用于shallow和mount的enzyme-to-json)。