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周围运行了一个类似的东西,它通过了,但通过测试没有正确通过。

gojuced7

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

相关问题