defaultRowRenderer 打破了开玩笑的单元测试。 ...Object.<anonymous> ...导入 createMultiSort答案

【问题标题】：defaultRowRenderer breaks jest unit test. ...Object.<anonymous> ... import createMultiSortdefaultRowRenderer 打破了开玩笑的单元测试。 ...Object.<anonymous> ...导入 createMultiSort
【发布时间】：2019-01-28 07:44:29
【问题描述】：

当我使用 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';

它可以很容易地复制。步骤：

使用 create-react-app 安装 typescript 应用程序
安装 react-virtualized 和 @types/react-virtualized

在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;

运行测试

有没有真正的方法可以解决这个问题？

【问题讨论】：

有人解决过这个问题吗？
我仍然使用解决方法：处理来自github.com/bvaughn/react-virtualized/blob/master/source/Table/…的函数defaultRowRenderer
感谢@Artem，我会尝试一下，因为目前我已经设法使用 Jest transformIgnorePatterns 修复它，以确保 react-virtualized 被 babel/webpack 转译

标签： typescript jestjs react-virtualized unexpected-token

【解决方案1】：

我通过告诉 jest 在运行转换时不要忽略 react-virtualized 来解决这个问题，因为默认情况下所有 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.在package.json中的jest配置中添加transformIgnorePattern

例如package.json

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

或

将以下 CLI arg 添加到您的 npm test 脚本：--transformIgnorePatterns "node_modules/(?!react-virtualized)/"

例如package.json

{
  ...
  "scripts": {
    ...
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!react-virtualized)/\"",
  }
}

【讨论】：