Есть тесты, написанные с помощью @testing-library/react и vitest.
vi.mock("@/theme", () => ({
lightTheme: {
global: {
fontFamily: "Roboto",
},
},
}));
describe("hooks | useCustomTheme", () => {
it("changes h1 font family", () => {
const { result } = renderHook(() =>
useCustomTheme({
page: {
fontSettings: { headings: "Comic Sans MS" },
},
} as ModelConfiguration),
);
expect(result.current.typography.h1.fontFamily).toBe(
"Comic Sans MS,Roboto",
);
});
});
В этом тесте мы покрываем логику хука useCustomTheme
import { lightTheme } from "@/theme";
export const useCustomTheme = (pageConfig?: ModelConfiguration) => {
return useMemo(() => {
const colors = pageConfig?.page?.colorSettings;
const fonts = pageConfig?.page?.fontSettings;
const captionColor = Color(pageConfig?.page?.colorSettings?.bodyText)
.saturate(0.5)
.hex();
const customTheme = {
typography: {
h1: {
...(fonts?.headings && {
fontFamily: [fonts.headings, lightTheme.global.fontFamily].join(),
}),
...(colors?.headings && { color: colors.headings }),
},
// other styles
} as const satisfies DeepPartial<Theme>;
return merge(
{},
lightTheme,
{
global: {
fontFamily: [
pageConfig?.page?.fontSettings?.bodyText,
lightTheme.global.fontFamily,
]
.filter(Boolean)
.join(","),
},
},
customTheme,
);
}, [pageConfig]);
};
Как видим в этом хуке импортируется lightTheme, который мы мокаем перед этим. Но при запуске теста почему-то этот мок не срабатывает и берётся настоящий lightTheme. Почему так может происходить?
Пробовал обарачиваться мок в beforeEach, но проблему это не решило.