时间戳

首页 > 解决方案 > 浅浅和开玩笑渲染有什么区别？

javascript - 浅浅和开玩笑渲染有什么区别？

问题描述

开玩笑地说，使用酶的浅层和渲染有什么区别？

以下是两者的示例：

用浅层测试渲染：

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 的典型用法是什么。我用浅层编写了所有测试，我应该回去更改它以在某些情况下渲染吗？

标签： javascriptreactjstestingjestjs

解决方案

shallow并且render是 Enzyme 特有的，可以独立于 Jest 使用。

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

render渲染整个组件，用 Cheerio 包装，这是 Node.js 的 jQuery 实现。它旨在借助类 jQuery 选择器进行黑盒集成/e2e 测试。它可能有一些用途，但shallow很mount常用。

它们都不应该与 一起使用toMatchSnapshot，至少没有额外的工具（enzyme-to-jsonforshallow和mount）。

推荐阅读