[英]Testing React Native Functional Component With Dependency on Promise
I've got a functional component in React Native.我在 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>);
}
I'd like to be able to test that the promised SpecialObject
is retrieved correctly when the component is rendered.我希望能够测试在呈现组件时是否正确检索了承诺的SpecialObject
。 This is what I've got now:这就是我现在所拥有的:
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();
});
This test executes and nothing breaks, I'm just not seeing the same thing as I'm seeing when running the app.该测试执行并且没有任何中断,我只是没有看到与运行应用程序时看到的相同的东西。 When I run the app, I see the promised value being displayed after a 250ms delay.当我运行应用程序时,我看到承诺的值在 250 毫秒延迟后显示。 But my problem is that I want to see the updated/promised value in my test snapshot.但我的问题是我想在我的测试快照中看到更新/承诺的值。
So what I'm seeing in my app is something like this:所以我在我的应用程序中看到的是这样的:
<!-- This the updated/promised SpecialObject. -->
<Text>5</Text>
But I'm getting something like this in my test snapshot:但是我在我的测试快照中得到了这样的东西:
<!-- This just comes from a new instance of SpecialObject, which is the initialized component state. -->
<Text>0</Text>
What's the simplest/cleanest way to invoke some sort of update on my component so that I can verify that the promise is fulfilled when the component is rendered?在我的组件上调用某种更新的最简单/最干净的方法是什么,以便我可以在呈现组件时验证承诺是否得到满足?
First of all, there is a popular testing library for handling various testing scenarios in React and it is called @testing-library/react .首先,有一个流行的测试库用于处理 React 中的各种测试场景,它被称为@testing-library/react 。 I highly suggest you use it for your React component tests.我强烈建议你在 React 组件测试中使用它。
As for the question you ask, there are methods in @testing-library/react
like waitFor
and await findBy...
and you can use them for your async tests.至于你问的问题, @testing-library/react
像waitFor
和await findBy...
,你可以将它们用于异步测试。 (SeeAsync Methods ) (见异步方法)
So an example would be like this:所以一个例子是这样的:
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();
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.