defaultRowRenderer прерывает модульный тест jest. Объект. ‹Anonymous› import createMultiSort

Когда я использую defaultRowRenderer (метод react-virtualized для таблицы), модульные тесты jest завершаются ошибкой:

...node_modules\react-virtualized\dist\es\Table\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import createMultiSort from './createMultiSort';

Его легко воспроизвести. Шаги:

  1. Установите приложение typescript с помощью create-react-app
  2. Установите react-virtualized и @ types / react-virtualized

  3. Добавить простую таблицу в App.tsx

    import * as React from "react";
import { Column, Index, Table } from "react-virtualized";
import { defaultRowRenderer } from "react-virtualized/dist/es/Table";
import "./App.css";

import logo from "./logo.svg";

class App extends React.Component {
  public render() {
    return (
      <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to React</h1>
    </header>
    <p className="App-intro">
      To get started, edit <code>src/App.tsx</code> and save to reload.
    </p>
    <Table
      style={{ outline: "none" }}
      height={300}
      width={300}
      headerHeight={40}
      rowHeight={40}
      rowCount={10}
      rowGetter={this.rowGetter}
      rowRenderer={this.rowRenderer}
    >
      <Column width={150} minWidth={90} label="Type" dataKey="Type" />
    </Table>
  </div>
);
}

  private rowGetter = (props: Index) => {
     return {};
  };

  private rowRenderer = (props: any) => {
      return defaultRowRenderer({
          ...props,
          style: { ...props.style, outline: "none" }
      });
  };
}

export default App;

  4. Запустить тест

Есть ли верный способ решить эту проблему?


typescript jestjs react-virtualized unexpected-token
person Artem    schedule 22.08.2018    source источник
comment
Кто-нибудь когда-нибудь это исправлял?   -  person Michal Ciechan    schedule 10.08.2019
comment
Я все еще использую обходной путь: справиться с функцией defaultRowRenderer из github.com / bvaughn / react-virtualized / blob / master / source / Table /   -  person Artem    schedule 12.08.2019
comment
Спасибо @Artem, попробую, так как в настоящее время мне удалось исправить это с помощью Jest transformIgnorePatterns, чтобы гарантировать, что реакция-виртуализация передается с помощью babel / webpack   -  person Michal Ciechan    schedule 13.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось исправить это, сказав jest не игнорировать виртуализированную реакцию при запуске преобразований, поскольку по умолчанию все node_modules игнорируются для преобразований:

Я создал PR со следующим редактированием README.md

Тестирование

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

\path\to\src\node_modules\react-virtualized\dist\es\Table\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import createMultiSort from './createMultiSort';
SyntaxError: Unexpected identifier

Чтобы исправить это, вы должны убедиться, что node_modules/react-virtualized преобразован. С помощью CRA (Create-React-App) и Jest вы можете: 1. Добавить transformIgnorePattern в конфигурацию jest в package.json

Пример package.json

 {
   ...
   "jest": {
     ...
     "transformIgnorePatterns": [
       "node_modules/(?!react-virtualized)/"
     ]
   }
 }

ИЛИ

  1. Добавьте следующий аргумент CLI в свой npm test скрипт: --transformIgnorePatterns "node_modules/(?!react-virtualized)/"

    Пример package.json

{
  ...
  "scripts": {
    ...
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-virtualized)/\"",
  }
}
person Michal Ciechan    schedule 13.08.2019