typescript - defaultRowRenderer 打破了开玩笑的单元测试。...目的。... 导入 createMultiSort

Question

当我使用defaultRowRenderer（表的反应虚拟化方法）时，开玩笑的单元测试失败并出现错误：

...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. 使用create-react-app安装typescript应用程序
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. 运行测试

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

Answer 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.transformIgnorePattern在jest配置中添加package.json

例子package.json

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

或者

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

   例子package.json

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