如何用玩笑正确模拟命名导出子组件

Question

所以，这是我的组件和测试的简化版本。

export const VerifyPositionsDialog = () => {
  return (
    <BaseVerifyPositionsDialog>
      <PositionsArea />
    </BaseVerifyPositionsDialog>
  );
};

为了更好的可读性，我省略了道具和组件逻辑。

我一直在尝试做的是模拟 PositionsArea 组件，这样我就可以单独对 VerifyPositionsDialog 进行单元测试。

这是我到目前为止的测试。

jest.mock("../VerifyPositionsDialog/PositionsArea", () => ({
  __esModule: true,
  PositionsArea: () => <div />,
}));

render(<VerifyPositionsDialog />);

我已经根据 SO 的其他回答尝试了很多不同的方法，但 none 似乎有效。任何帮助都会很棒。

Answer 1

您应该使用 jest.fn 模拟组件，返回模拟的 div:

jest.mock('../VerifyPositionsDialog/PositionsArea', () =>
  jest.fn(() => <div>Mocked</div>),
);

describe('Test', () => {
  it('Mock Component Test', () => {
    const { debug } = render(<VerifyPositionsDialog  />);

    // You will check with debug() that mocked div was rendered
    debug();
  });
});

如何用玩笑正确模拟命名导出子组件

How to properly mock named export children components with jest

unit-testing

mocking

typescript

reactjs

react-testing-library