typescript 有没有一种明确的方法来测试一个React组件是否返回了另一个构建的自定义组件？

oxf4rvwz 于 2023-03-24 发布在 TypeScript

关注(0)|答案(1)|浏览(86)

例如，
ComponentA.tsx:

const ComponentA = () => {
    return (
        <>
        <ComponentB/>
        </>
    )
}

ComponentA.test.tsx

describe("ComponentA", () => {
    it("Calls ComponentB in render", () => {
        render(<ComponentA/>);
        const componentB = <ComponentB/>;
        expect(componentB).toHaveBeenCalledTimes(1);
    });
});

尝试了上面的方法，但测试仍然失败。我希望类似的东西能起作用，我尝试了上面的其他变体，但仍然没有通过测试。有一次，我在expect周围运行了一个类似的东西，它通过了，但通过测试没有正确通过。

typescript

来源：https://stackoverflow.com/questions/75817650/is-there-a-clear-way-to-test-that-a-react-component-returns-another-custom-compo

1条答案

按热度按时间

gojuced71#

toHaveBeenCalled(..)使用mock函数。
要测试ComponentA是否调用ComponentB，可以创建一个mock ComponentB函数并示例化<ComponentA/>：

const ComponentA = () => {
    return (
        <>
        <ComponentB/>
        </>
    )
}

// Create mock function
const ComponentB = jest.fn();

describe("ComponentA", () => {
    it("Calls ComponentB in render", () => {
        render(<ComponentA/>);
        expect(ComponentB).toHaveBeenCalledTimes(1);
    });
});

赞(0）回复(0）举报 2023-03-24

我来回答

typescript 有没有一种明确的方法来测试一个React组件是否返回了另一个构建的自定义组件？

1条答案

相关问题

热门标签

最新问答