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

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, называемый https://github.com/dividab/tsconfig-paths-webpack-plugin, который позволяет Webpack разрешать эти операции импорта. Вам также необходимо настроить разрешение модуля Jest.

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

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

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