Как тестировать компоненты которые используют context

Есть компонент такого типо

function Elementary() {
  const {
    state: { data },
  } = useContext(elementaryContext);

Мои тестики

describe("Тестируем Элементарно бро", () => {
  it("ничего никому не должен", () => {
    render(
      <ElementaryContext.Provider state={{ elementary }}>
        <Elementary />
      </ElementaryContext.Provider>
    );

    // Тут expect чего-то
  });
});

Вопрос: Как сюда отправить нужные данные чтобы тест работал?

elementary обычный массив объектов с шаблоном { id: number, name: string }

Получаю ошибку -> Cannot read property '_context' of undefined

Вот в этой строке

const {
        state: { data },
      } = useContext(elementaryContext);

Потому что она ждет некий контекст.

Попробовал написать так:

import { createContext } from "react";
import { render } from "@testing-library/react";

export const ElementaryContext = createContext(null);

export const customRender = (ui, { state, ...renderOptions }) => {
  return render(
    <ElementaryContext.Provider state={state}>{ui}</ElementaryContext.Provider>,
    renderOptions
  );
};

const elementary = [
  { 
     name: "name",
     id: 13
  }
]

describe("Тестируем Элементарно бро", () => {
  it("ничего никому не должен", () => {
     customRender(<Elementary />, { state: elementary });

    // Тут expect чего-то
  });
});

Тоже не сработало.


Ответы (0 шт):