Не удается запустить react-scripts test с chakra

Вопрос или проблема

Невозможно найти модуль '@chakra-ui/utils/context' из 'node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs'

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^2.2.4",
    "@chakra-ui/react": "^2.10.3",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@headlessui/react": "^2.2.0",
    "@heroicons/react": "^2.1.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.119",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "feather-icons": "^4.29.2",
    "framer-motion": "^11.11.11",
    "next-themes": "^0.4.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-feather": "^2.0.10",
    "react-icons": "^5.3.0",
    "react-router-dom": "^6.27.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

import { render, screen } from "@testing-library/react";
import App from "./App";

test("отрисовывает ссылку на изучение react", () => {
  render(<App />);
  const linkElement = screen.getByText("Hello");
  expect(linkElement).toBeInTheDocument();
});

import { ReactNode } from "react";
import { Button } from "@chakra-ui/react";
import { ChakraProvider } from "@chakra-ui/react";
...


const App = () => {
  return (
    <ChakraProvider>
      ...
      <Button size={"sm"} colorScheme="red">
        Hello
      </Button>
      ... 
    </ChakraProvider>
  );
};

export default App;

Ответ или решение

Проблема, с которой вы столкнулись, является распространенной при работе с библиотеками, такими как Chakra UI, в контексте тестирования на React. Ошибка, говорящая о том, что не удается найти модуль @chakra-ui/utils/context, возникает в результате неполной конфигурации окружения для тестирования или несовместимости версий библиотек.

Вот несколько шагов, которые помогут вам устранить эту проблему:

1. Обновление библиотек

Убедитесь, что все используемые вами библиотеки обновлены до последних стабильных версий. Иногда подобные ошибки возникают из-за несовместимости или отсутствия необходимых зависимостей. Используйте команду:

npm outdated

Для обновления пакетов выполните:

npm update

2. Проверка структуры проекта

Убедитесь, что пакет @chakra-ui/react и все его зависимости, включая библиотеку @chakra-ui/utils, установлены правильно. Вы можете попробовать удалить директорию node_modules и файл package-lock.json, а затем переустановить зависимости:

rm -rf node_modules package-lock.json
npm install

3. Проверка файлов конфигурации

Поскольку вы используете TypeScript, убедитесь, что в вашем проекте правильно настроен tsconfig.json. Убедитесь, что у вас есть необходимые типы для тестирования и React. Пример конфигурации tsconfig.json может выглядеть так:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true
  },
  "include": ["src"]
}

4. Корректная конфигурация тестового окружения

Если вы используете Jest для тестирования в вашем проекте, не забудьте добавить необходимые настройки в файл конфигурации jest.config.js. Убедитесь, что у вас правильно настроен преобразователь для работы с JS и TS:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  // возможно, вам понадобятся дополнительные настройки
};

5. Использование global в тестах

Иногда Chakra UI требует глобальные контексты или провайдеры, которые могут быть не явно определены в тестах. Вы можете обернуть ваше приложение в ChakraProvider в самом тесте:

import { ChakraProvider } from "@chakra-ui/react";
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(
    <ChakraProvider>
      <App />
    </ChakraProvider>
  );
  const linkElement = screen.getByText("Hello");
  expect(linkElement).toBeInTheDocument();
});

6. Проверка версий библиотек

Обратите внимание на версии библиотек в вашем package.json. Например, вы используете @chakra-ui/react в версии ^2.10.3. Проверьте документацию и репозитории на наличие известных проблем с этой версией или попробуйте переключиться на более стабильную версию.

Заключение

Я надеюсь, что эти предложения помогут вам решить проблему с тестированием вашего приложения на основе Chakra UI. Важно помнить, что тестирование может требовать особого подхода, особенно при использовании сложных компонентов и библиотеки. Если проблема сохранится, рассмотрите возможность обращения за поддержкой в комьюнити разработчиков Chakra UI или на соответствующих форумах по React.