测试依赖于承诺的React原生功能组件

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

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

我在应用中看到的是这样的:

<!-- 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方法)

所以一个例子是这样的:

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