Блог

Я пишу пользовательский рендеринг для тестовых файлов в проекте react, в котором используется библиотека тестирования react, чтобы я мог избегать бойлера для каждого тестового файла, в который я завернул его с тегом.

Поэтому в пользовательском тесте файла рендеринга-util.tsx я экспортирую все из @testing-library/react , чтобы я мог импортировать свою пользовательскую функцию рендеринга и все другие функции библиотеки тестирования React (fireEvent, экран и т. Д.) Из того же места.

но при этом я не могу импортировать другие функции RTL, такие как fireEvent, screen, waitFor и т.д.

Ниже приведен мой код :

тест-utils.tsx:

 import React, {FC, ReactElement} from 'react';
import {render} from '@testing-library/react';
import {Provider} from 'react-redux';
import {BrowserRouter as Router} from 'react-router-dom';
import configureStore from 'redux-mock-store';

const mockStore = configureStore([]);

const customRender = (
  ui: ReactElement,
  {initialState = {}, store = mockStore(initialState), ...renderOptions} = {}
) => {
  const ProviderWrapper: FC = ({children}) => {
    return (
      <Router>
        <Provider store={store}>{children}</Provider>
      </Router>
    );
  };

  return render(ui, {wrapper: ProviderWrapper, ...renderOptions});
};

export * from '@testing-library/react';

export {customRender as renderWithProviders};
 

тестовый файл — abc.test.tsx

 import {renderWithProviders, screen, fireEvent, waitFor} from 'test-utils';
 

ошибки :

не имеет экспортированного участника ‘fireEvent’

не имеет экспортированного участника «waitFor»

чтобы избежать относительного импорта, который я сделал ниже, настройте конфигурацию:

jest.config.json :

test-utils находится в разделе src/utils/test-utils

 module.exports = {
   ...
   moduleDirectories: ['src', 'node_modules', '<rootDir>/src/utils'],
   ...
}
 

**tsconfig.json: **

   "compilerOptions" : {
   ...,
  "baseUrl": "./src",
  "paths": {
      "^/*": ["../*"],
      "@/*": ["*"],
      "test-utils": ["./utils/test-utils"]
    }
  ...
}