测试依赖 Promise 的 React Native 功能组件

Question

我在 React Native 中有一个函数式组件。

import { ReactElement, useEffect, useState } from "react-test-renderer/node_modules/@types/react";
import SpecialObject from "./SpecialObject";
import { getPromisedObject } from "./AccessFunctions";

export function PromiseDependencyComponent(): ReactElement {
  const [val, setVal] = useState<SpecialObject>(new SpecialObject());

  const promisedVal: Promise<SpecialObject> = getPromisedObject();

  useEffect(() => {
    setInterval(() => {
      promisedVal.then( (obj) =>
        setVal(obj); 
      );
    }, 250);
  }, []);

  return (<Text>{val.getSomeField()}</Text>);
}

我希望能够测试在呈现组件时是否正确检索了承诺的SpecialObject。这就是我现在得到的：

import * as React from "react";
import renderer from "react-test-renderer";
import PromiseDependencyComponent from "../PromiseDependencyComponent";

it("PromiseDependencyComponent renders correctly", () => {
  const componentRenderer = renderer.create(<PromiseDependencyComponent />);
  // I've also tried using timers and componentRenderer.update() and neither worked for me.
  const tree = componentRenderer.toJSON();

  expect(tree).toMatchSnapshot();
});

这个测试执行了，没有任何中断，我只是没有看到与运行应用程序时看到的相同的东西。当我运行应用程序时，我看到承诺的值在 250 毫秒延迟后显示。但我的问题是我想在我的测试快照中看到更新/承诺的值。

所以我在我的应用中看到的是这样的：

  <!-- This the updated/promised SpecialObject. -->
  <Text>5</Text>

但我在测试快照中得到了类似的东西：

  <!-- This just comes from a new instance of SpecialObject, which is the initialized component state. -->
  <Text>0</Text>

在我的组件上调用某种更新的最简单/最干净的方法是什么，以便我可以在渲染组件时验证承诺是否已实现？

Answer 1

首先，React 中有一个流行的测试库用于处理各种测试场景，它被称为@testing-library/react。我强烈建议您将它用于您的 React 组件测试。

至于您提出的问题，@testing-library/react 中有一些方法，例如 waitFor 和 await findBy...，您可以将它们用于异步测试。 （见Async Methods）

所以一个例子是这样的：

import {render, screen} from "@testing-library/react"
import MyAsyncComponent from "./MyAsyncComponent"

describe("My Async Component", () => {
  it("Updates after promise resolves", async () => {
    render(<MyAsyncComponent/>)

    const myAsyncResult = await screen.findByText("5");

    expect(myAsyncResult).toBeInTheDocument();

  })
})