The defaultRowRenderer is causing issues with my Jest unit test. It seems to be related to an object with an anonymous import of createMulti

Encountering a failure in jest unit-tests when using the defaultRowRenderer method in react-virtualized for a Table component, with the error message:

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

This issue can be easily replicated through the following steps:

  1. Start by installing a typescript app using create-react-app
  2. Then, install react-virtualized and @types/react-virtualized

  3. Integrate a simple Table component 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 the unit tests

Is there a reliable solution to fix this issue?

typescriptjestjsreact-virtualizedunexpected-token

Answer №1

After some troubleshooting, I was able to solve this issue by instructing jest not to overlook react-virtualized during transforms. By default, all node_modules are ignored for transforms.

To address this, I submitted a PR that included the following modification to README.md:

Testing

Due to the fact that this library is not pre-compiled, it needs to undergo transformation by your loader. Failure to do so may result in errors like the following:

\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 resolve these errors, it is necessary to ensure that node_modules/react-virtualized is transformed. When using CRA (Create-React-App) and Jest, you have two options:

  1. Add a transformIgnorePattern to the jest configuration in package.json

    Here's an example of package.json:

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

OR

  1. Include the following CLI argument in your npm test script: 

    --transformIgnorePatterns "node_modules/(?!react-virtualized)/"

    Here's an example of package.json:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating numerous query parameters in Angular version 14

I am currently working on developing a multi-item filter feature for my application and I am faced with the challenge of sending multiple query parameters in the API request to retrieve filtered items. My main concern is whether there is a more efficient ...

angulartypescriptangular14

Navigating the interface types between Angular, Firebase, and Typescript can be tricky, especially when working with the `firebase.firestore.FieldValue`

I am working on an interface that utilizes Firestore timestamps for date settings. export interface Album{ album_name: string, album_date: firebase.firestore.FieldValue; } Adding a new item functions perfectly: this.album ...

angulartypescriptdategoogle-cloud-firestoreinterface

Guide on Importing All Functions from a Custom Javascript File

As a beginner in learning Angular, I am faced with the task of converting a template into Angular. However, I am struggling to find a solution for importing all functions from a custom js file into my .component.ts file at once. I have already attempted t ...

javascriptangulartypescript

Dealing with the possibility of an empty array when accessing elements by index in Typescript

What is the best way to handle accessing elements by index in an array in Typescript when the array can be empty, resulting in potentially undefined elements? I am developing a simple game using React and Typescript where I have a variable named game whic ...

typescripttypes

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Issue: I am facing an issue where I cannot record video or get a video stream from the camera on iOS through my Angular web application built using ng build. Investigation: In my investigation, I explored various websites that discuss Apple iOS features ...

htmliosiphonetypescriptmediarecorder

In Vue using Typescript, how would I go about defining a local data property that utilizes a prop as its initial value?

When passing a prop to a child component in Vue, the documentation states: The parent component updates will refresh all props in the child component with the latest value. Avoid mutating a prop inside a child component as Vue will warn you in the consol ...

javascripttypescriptvue.jsvuejs2

The error message states that the type '{}' does not contain the property 'API_BASE_URL'

Encountering this error message when trying to access my API_URL as defined in the enviroment.ts file within a service class. Error: src/app/product/product.service.ts:12:25 - error TS2339: Property 'API_BASE_URL' does not exist on type '{} ...

angulartypescript

Ways to utilize the useRef method within the useContext hook while implementing Typescript

Struggling to incorporate useRef into my global Next.js useContext function while utilizing TypeScript. Attempted approach and encountered errors: interface tripAttributes{ tripTitle: string } const initialTripState: tripAttributes = { tripTitle ...

reactjstypescriptnext.jsreact-hooks

What is preventing me from using the "@" symbol to substitute the lengthy relative path in my __tests__ directory?

https://i.sstatic.net/U1uW3.png When I initialized my Vue project using vue-cli, I encountered an issue where the use of @ in my src folder was functioning correctly, but not in my __tests__ folder. I have already added configurations to my tsconfig.json ...

typescriptvue.jsvue-cli

Leveraging external type definitions with certain types that are not made available for export

Currently, I am integrating TypeScript into my ReactJs project along with the Leaflet library for displaying world maps. The challenge arose when I needed to provide type definitions for the Leaflet library, but I discovered that they already exist as a no ...

reactjstypescriptleaflet

Display the number of objects in an array using Angular and render it on HTML

I am having trouble displaying the length of an array on my HTML page. No errors are showing up in the console either. Can someone help me figure out how to get the total number of heroes? HTML: <div *ngFor="let hero of heros"> <div>The tota ...

angulartypescript

Tips for preventing the ngbTypeahead input field from automatically opening when focused until all data is fully mapped

When clicking on the input field, I want the typeahead feature to display the first 5 results. I have created a solution based on the ngbTypeahead documentation. app.component.html <div class="form-group g-0 mb-3"> <input id="typ ...

angulartypescriptng-bootstrap

AngularFire UPDATE -> APPLY CHANGES

I can't seem to figure this out. I'm wondering how to UPDATE a document that is returned in the WHERE clause using AngularFire: constructor(private db: AngularFirestore) { } var path = this.db.collection('users').doc('type') ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Almost there, but stuck on the final TS2322: Type TcolTuple[i] is not assignable to type string | number | symbol compiler error. Here's a nifty utility function called rowsToObjects() that many developers have probably come up with at some point, ...

typescripttypescript-genericstypingkeyof

Unexpected token error in TypeScript: Syntax mistake spotted in code

Being new to Angular, I understand that mastering TypeScript is crucial for becoming a skilled Angular developer. Therefore, I created this simple program: function loge(messag){ console.log(messag); } var message:string; message = "Hi"; loge(messa ...

javascriptangulartypescript

The EventEmitter in Angular 8 is prohibiting the emission of an Object

Is there a way I can emit an Object instead of primitive data types? I have an object const amount = { currenty: 'USD', total: '10.25' }; that I need to emit to the parent component. export class MyChildComponent implements OnInit { ...

angulartypescriptangular-material

As time passes, the Azure Service Bus Consumer experiences a decline in performance

My issue involves managing different topics with subscriptions, each tied to a consumer. Over time, I've noticed a decline in the number of messages received. Despite trying to utilize maxconcurrentcalls, it seems to only be effective at the start. My ...

javascripttypescriptnpmazureservicebusazure-servicebus-topics

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

I have set up a table in Vuetify 2 with a v-progress-linear component to monitor the user's remaining time. Initially, my implementation was simple like this. https://i.sstatic.net/x373G.png However, we decided to split it into 4 sections for better ...

csstypescriptvue.jsvuetify.jsprogress-bar

The supabase signup function keeps showing me the message "Anonymous sign-ins are disabled." Can anyone help me understand why this is happening?

I'm currently in the process of setting up authentication in Next.js with supabase, but encountering an issue when attempting to execute the signUp function. The error message I'm seeing is: Anonymous sign-ins are disabled Below is the snippet o ...

typescriptnext.jssupabase

Exploring how NestJS can serialize bigint parameters within DTOs

I have data transfer objects (DTOs) with parameters that are of type bigint. However, when I receive these DTOs, the parameters always have a type of string. Here is an example: @Get("") async foo(@Query() query: Foo) { console.log(typeof Foo ...

node.jstypescriptnestjsbigint