Реактивные тесты не выполняются, когда тестируемый компонент отображает вложенный подключенный компонент, не может найти вложенный компонент

Question

Я использую проект создания-реакции-приложения с Typescript и Enzyme (я также пробовал реагировать-тестирование-библиотеку и столкнулся с той же проблемой)

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

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

Cannot find module 'src/components/Ping' from 'index.tsx' где index.tsx - компонент приложения.

App.test.tsx

import { shallow } from 'enzyme'
import * as React from 'react'
import App from '..'
it('renders without crashing', () => {
    shallow(<App/>)
});

App.tsx

import * as React from 'react';
import Ping from "src/components/Ping";
import './App.css';

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Ping/>
      </div>
    );
  }
}

export default App;

эта ошибка также возникала, когда я пытался использовать реагирующую библиотеку с функцией рендеринга.

Answer 1

Если вы установили конфигурацию paths в своем tsconfig.json, это позволяет TypeScript понять импорт src/components/Ping для целей проверки проверки типа, но не разрешаетпакет Webpack внутри Create React App для определения пути.На самом деле TypeScript не переписывает импорт.

Если вы используете Create React App 1.x (версия react-scripts-ts), вы не сможете использовать paths без извлечения и изменения вручную Webpack.конфигурации.Существует плагин Webpack под названием tsconfig-paths-webpack-plugin , который позволяет Webpack разрешать эти операции импорта.Вам также необходимо настроить разрешение модуля Jest.

Если вы используете Create React App 2.x, вы можете использовать @babel/preset-typescript для включения поддержки TypeScript, а поскольку вы используете Babel, выу вас также будет доступ к babel-plugin-module-resolver , где вы сможете настроить Babel для перезаписи этих псевдонимов пути в соответствии с ожидаемым TypeScript.В качестве дополнительного преимущества можно настроить Jest и Webpack, поскольку оба используют Babel.

Вы также можете просто использовать относительный импорт:

import Ping from "../src/components/Ping"