Question

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

安装反应虚拟化和 @ 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;

运行测试

是否有解决此问题的真实方法？

Answer 1

我设法通过告诉玩笑在运行转换时不要忽略react-virtualized来解决此问题，因为默认情况下，所有node_modules对于转换都将被忽略：

我通过以下对README.md的编辑创建了PR。

测试

由于该库未预先编译，因此需要由您的加载程序进行转换，否则可能会出现诸如以下的错误：

\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)/"
     ]
   }
 }

OR

将以下CLI参数添加到npm test脚本中：--transformIgnorePatterns "node_modules/(?!react-virtualized)/"

示例package.json

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

defaultRowRenderer中断笑话单元测试。 ... Object。<anonymous> ...导入createMultiSort

1 个答案:

测试