Задать вопрос
@Andrey1302

Vitest. Почему не подтягивается mock стилей?

Есть тесты, написанные с помощью @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, но проблему это не решило.
  • Вопрос задан
  • 41 просмотр
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы