如何通过使用带有 Jest 的外部帮助文件来模拟外部依赖?

时间:2021-03-25 15:21:28

标签: reactjs jestjs mocking

鉴于我有 react 组件,我想测试该组件如何根据不同的媒体类型进行渲染。

我有以下测试文件:

import React from "react";
import { render, RenderResult } from "src/utils/render";
import MyPage from "src/pages/myPage";
import { SetupMediaMocks, Media } from "src/utils/media-type";

const renderMyPage = (media: Media): RenderResult => {
  SetupMediaMocks(media);
  return render(<MyPage/>);
};

test("Test MyPage mobile", () => {
  const result = renderMyPage(Media.Mobile);

  expect(result.asFragment()).toMatchSnapshot();
});

test("Test MyPage desktop", () => {
  const result = renderMyPage(Media.Desktop);

  expect(result.asFragment()).toMatchSnapshot();
});

使用方法 SetupMediaMocks 在外部文件中设置模拟

import {
  getIsDesktop,
  getIsMobile,
  getIsTablet,
} from "externalLibrary";
import { mocked } from "ts-jest/utils";

const getIsMobileMock = mocked(getIsMobile);
const getIsTabletMock = mocked(getIsTablet);
const getIsDesktopMock = mocked(getIsDesktop);

jest.mock("externalLibrary");

export enum Media {
  Mobile = "Mobile",
  Tablet = "Tablet",
  Desktop = "Desktop",
}

export const SetupMediaMocks = (media: Media): void => {
  let isMobile = false;
  let isTablet = false;
  let isDesktop = false;

  switch (media) {
    case Media.Mobile: {
      isMobile = true;
      break;
    }
    case Media.Tablet: {
      isTablet = true;
      break;
    }
    case Media.Desktop: {
      isDesktop = true;
      break;
    }
    default: {
      isDesktop = true;
      break;
    }
  }

  getIsMobileMock.mockReturnValue(isMobile);
  getIsTabletMock.mockReturnValue(isTablet);
  getIsDesktopMock.mockReturnValue(isDesktop);
};

如果我将模拟代码放入测试文件中,一切都会按预期工作,但当我拉入外部文件时却不会。如何使用外部文件设置每个测试的模拟?

0 个答案:

没有答案