Тестирование проекта библиотеки компонентов React с использованием Vite.

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

- LibraryProject
 - src
  - main
   - TestComponent.tsx
  - hooks
   - hookFile.ts
  - enums
   - enumFile.enum.ts

import TestComponent, { enumA } from "library-project";

ERROR in ./src/App.js 46:22-39
export 'enumA' (imported as 'enumA') was not found in 'library-project' (possible exports: default)

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

Для успешного тестирования библиотеки компонентов React, разработанной с использованием TypeScript и Vite, необходимо учитывать несколько аспектов конфигурации вашей сборки и структуру экспорта модулей. В вашем случае проблема заключается в том, что вы правильно импортируете компонент, но не можете получить доступ к перечислениям и хукам. Рассмотрим, как можно исправить эту ситуацию и организовать тестирование библиотеки.

Структура проекта

Предположим, что ваша структура проекта выглядит следующим образом:

LibraryProject
 ├─ src
 │  ├─ main
 │  │  └─ TestComponent.tsx
 │  ├─ hooks
 │  │  └─ hookFile.ts
 │  └─ enums
 │     └─ enumFile.enum.ts
 └─ package.json

Проблема с экспортом

Ошибка, на которую вы натолкнулись, указывает на то, что enumA не экспортируется правильно. Убедитесь, что ваши перечисления и хуки экспортируются из соответствующих файлов.

Пример экспорта перечислений

В файле enumFile.enum.ts добавьте экспорт перечисления следующим образом:

export enum enumA {
  VALUE1,
  VALUE2,
}

Пример экспорта хуков

Если у вас есть хуки в hookFile.ts, убедитесь, что они также экспортируются:

export const useCustomHook = () => {
  // логика вашего хука
};

Обновление основного файла экспорта

Если вы хотите, чтобы все ваши компоненты, хуки и перечисления были доступны из одного файла (например, index.ts), создайте файл index.ts в директории src и добавьте туда следующие экспорты:

// src/index.ts
export { default as TestComponent } from './main/TestComponent';
export * from './hooks/hookFile';
export * from './enums/enumFile.enum';

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

import TestComponent, { enumA, useCustomHook } from 'library-project';

Настройка Vite

Для корректной работы библиотек с TypeScript и React убедитесь, что ваш файл vite.config.ts настроен правильно:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // Упрощение импортов
    },
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'), // Входной файл для библиотек
      name: 'LibraryProject',
      formats: ['es', 'umd'], // Форматы сборки
      fileName: (format) => `library-project.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // Исключение внешних зависимостей
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

Тестирование компонентов

Для тестирования React-компонентов можно использовать Jest вместе с React Testing Library. Если у вас еще нет настроенного Jest, установите необходимые зависимости:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom ts-jest

Создайте файл конфигурации jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js', // Мокирование стилей
  },
};

Пример теста для вашего компонента

Создайте файл TestComponent.test.tsx:

import { render, screen } from '@testing-library/react';
import TestComponent from './TestComponent';

test('renders TestComponent', () => {
  render(<TestComponent />);
  const linkElement = screen.getByText(/ваш текст/i);
  expect(linkElement).toBeInTheDocument();
});

Теперь вы сможете запускать тестирование при помощи команды:

npm test

Заключение

Таким образом, убедитесь, что все ваши компоненты, хуки и перечисления правильно экспортируются в библиотеке. Обновите конфигурацию Vite для поддержки библиотечного формата. Это поможет вам не только устранить текущие ошибки, но и обеспечить удобное использование библиотеки в других проектах. Настройка тестирования также станет важным шагом в поддержке качества вашего кода.