鉴于我有 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);
};
如果我将模拟代码放入测试文件中,一切都会按预期工作,但当我拉入外部文件时却不会。如何使用外部文件设置每个测试的模拟?