Как замокать useState в vi тесте react?

Question

[Дмитрий Путилов]

Всем привет, возник вот такой вот вопрос. Имеется вот такой вот тест

vi.mock("react", async () => {
  const actual = await vi.importActual("react");
  return {
    ...actual,
    useState: (initialValue: string) => {
      const state = vi.fn().mockReturnValue([initialValue, vi.fn()]);
      return state();
    },
    useEffect: actual.useEffect, // Сохраняем оригинальную реализацию useEffect
  };
});

describe("Тестовый тест", () => {
  it("test", async () => {
    render(
        <RenderWithRouter>
          <Apper />
        </RenderWithRouter>
    );

    screen.debug();
  });
}

Вот тестируемый компонент

import { useEffect, useState } from "react";

const Apper = () => {
  const [title, setTitle] = useState<string>("");
  const [description, setDescription] = useState<string>("");

  useEffect(() => {
    setTitle("Hello world");
    setDescription("Description");
  }, []);

  return (
    <div>
      {title} {description}
    </div>
  );
};

export default Apper;

Как я могу замокать useState только для title, то есть что бы я только titile поменял и все
Теперь вопрос по этому функционалу

vi.mock("react", async () => {
  const actual = await vi.importActual("react");
  return {
    ...actual,
    useState: () => {
      const state = vi.fn().mockReturnValue(["Hello test", vi.fn()]);
      return state();
    },
    useEffect: actual.useEffect, // Сохраняем оригинальную реализацию useEffect
  };
});

Он меняет useState, но глобально, и для description и для title, но вопрос в целом то еще вот в чем, как типизировать actual?!!! Он говорить о том, что actual unknow
TS2698: Spread types may only be created from object types. и поэтому выдает вот такую ошибку, потому что нельзя развернуть actual, как решить эту проблему?

То есть 2 основных вопроса

1. Как замокать только title из useState, а description не трогать
   
2. Как типизировать actual в этой функции для моканья useState?
   

Comments

[WbICHA]

Ты не должен мокать юзСтейт, юзЭффект и прочее. Смысл тестирования теряется.

Answer 1

[Дмитрий Путилов]

2. Типизация actual делается с помощью typeof React

const actual:typeof React = await vi.importActual("react");