defaultRowRenderer breaks jest unit test. ...Object. ... import createMultiSort

Question

When I use defaultRowRenderer (method of react-virtualized for Table), jest unit-tests are failed with error:

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

It can be reproduced easily. Steps:

1. Install typescript app with create-react-app
2. Install react-virtualized and @types/react-virtualized

3. Add simple Table in 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. Run test

Is there true way to resolve this problem?

Answer 1

I managed to fix this by telling jest not to ignore react-virtualized when running transforms, as by default all node_modules are ignored for transforms:

I have created a PR with the following edit to README.md

---

Testing

As this library does not come pre-compiled, it requires to be transformed by your loader, otherwise you may get errors such as:

\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

To fix these, you must ensure node_modules/react-virtualized is transformed. With CRA (Create-React-App) and Jest you can either: 1. Add a transformIgnorePattern to the jest config in package.json

Example package.json

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

OR

2. Add the following CLI arg to your npm test script: --transformIgnorePatterns "node_modules/(?!react-virtualized)/"

   Example package.json

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