testing-library/react 中 toJSON 的等价物是什么？

Question

在

@testing-library/react-native

中，我有一个由

render

提供的方法，称为

toJSON

，我用它来比较结果输出

    const { toJSON } = render(<HocText>simple string</HocText>);
    const { toJSON: expectedToJSON } = render(<Text>simple string</Text>);
    expect(toJSON()).toStrictEqual(expectedToJSON());

我正在尝试在

@testing-library/react

中找到与之相当的内容。

我试过了

    const { asFragment } = render(<HocMyComponent text="should be as is" />);
    const { asFragment: expectedAsFragment } = render(<span>should be as is</span>);
    expect(asFragment()).toStrictEqual(expectedAsFragment());

但是结果失败了，因为缺少我的数据。

Answer 1

asFragment

是正确的。

这实际上是测试中的一个错误。 但有点难看，所以我必须先进行序列化。

type MyComponentProps = { text: string };

function MyComponent({ text }: MyComponentProps) {
  return <span data-testid="my-element">{text}</span>;
}

const MyComponentWithRef = forwardRef<HTMLSpanElement, MyComponentProps>(
  ({ text }, ref) => (
    <span data-testid="my-ref-element" ref={ref}>
      {text}
    </span>
  )
);

describe("hoc", () => {
  it("simple component should work as expected", async () => {
    render(<MyComponent text="bar" />);
    expect(screen.getByTestId("my-element")).toHaveTextContent("bar");
  });

  it("should work with simple component", () => {
    const serializer = new XMLSerializer();
    const HocMyComponent = withHoc<MyComponentProps, MyComponentProps, HTMLSpanElement>(
      MyComponent
    );

    const { asFragment } = render(<HocMyComponent text="should be as is" />);
    expect(screen.getByTestId("my-element")).toHaveTextContent("should be as is");
    const renderedValue = serializer.serializeToString(asFragment());
    const { asFragment: expectedAsFragment } = render(
      <span data-testid="my-element">should be as is</span>
    );
    expect(renderedValue).toStrictEqual(
      serializer.serializeToString(expectedAsFragment())
    );
  });
});

但是一旦我弄清楚测试中出了什么问题。 测试结果是

it("should work with simple component", () => {
  const HocMyComponent = withHoc<MyComponentProps, MyComponentProps, HTMLSpanElement>(
    MyComponent
  );

  const { asFragment } = render(<HocMyComponent text="should be as is" />);
  expect(screen.getByTestId("my-element")).toHaveTextContent("should be as is");
  const { asFragment: expectedAsFragment } = render(
    <span data-testid="my-element">should be as is</span>
  );
  expect(asFragment()).toStrictEqual(expectedAsFragment());
});