Компонент модульного тестирования Vue 3, который использует Pinia с библиотекой тестирования Vue

Question

Я изо всех сил пытаюсь понять, как я могу протестировать рендеринг элементов на основе результатов вызова геттера Pina в моем приложении Vue 3 (с использованием библиотеки тестирования Vue). Примером того, чего я хочу достичь, может быть что-то вроде:

      <div v-for="contact in store.getContacts()">
      <p>{{contact.firstName}} {{ contact.lastName }}</p>
</div>

где я хочу проверить, что отображаются все имена контактов.

Мое приложение использует Vitest и @testing-library/vue, поэтому в моей тестовой спецификации для вышеуказанного теста у меня может быть:

      import { cleanup, getByRole, render, screen } from "@testing-library/vue";
import { describe, it, vi, beforeEach, afterEach } from "vitest";
import MyComponent from "@/components/MyComponent.vue";
import { createTestingPinia } from "@pinia/testing";

describe("MyComponent.vue", () => {

  let getByText: any, getByRole: any;

  beforeEach(() => {
    ({ getByText } = render(MyComponent, {
      global: {
        plugins: [
          createTestingPinia({
            initialState: {
              contacts: [{firstName:"Bill",lastName:"Jones"},{firstName:"Peter",lastName:"Smith"}],
            },
            stubActions: false,
            createSpy: vi.fn,
          }),
        ],
      },
    }));
  });

  afterEach(() => {
    cleanup();
  });
  
  it("should display the first name", () => {
    getByText("Bill Jones");
  });

}); 

в магазине у меня есть следующая настройка состояния:

      interface Student {
  "id": number;
  "firstName": string;
  "lastName": string;
  "house": string;
  "year": number;
  "class": string;
}

interface ContactState {
  contacts: Student[];
}

export const useContactStore = defineStore({
  id: "contact",
  state: ():ContactState => ({
    contacts: [],
}),

и геттер:

      getContacts: (state) => {
      return state.contacts;
}

Я думаю, что правильно настроил начальное состояние хранилища (??), но геттер, похоже, не работает - что еще мне нужно сделать здесь? Должен ли я издеваться над геттером или что-то в этом роде? Или, может быть, я не правильно инициализирую магазин в тесте?

(мое приложение работает нормально, это тест, я не могу работать)

Answer 1

Когда вы создаете начальное состояние, используяcreateTestingPinia, вам также нужно указать магазинid, также называемыйname, что в вашем случае будетcontactкак видно в вашемdefineStore.

Итак, в этом случае, я думаю, вам следует изменить текущий код на этот:

      ...
createTestingPinia({
    initialState: {
        contact: {
            contacts: [{firstName:"Bill",lastName:"Jones"},{firstName:"Peter",lastName:"Smith"}]
        },
     },
     stubActions: false,
     createSpy: vi.fn,
}),
...

Это не очень хорошо объяснено в документации, однако это должно как минимум инициализироватьcontactsмассив для вас.