Error: The function cannot be executed on an immutable object in React Native Jest unit testing with Typescript

Currently, I am experimenting with jest unit testing for a typescript-based react native project. However, I am facing an issue when I run npm test, and the error message is as follows:

● Test suite failed to run

TypeError: seamless_immutable_1.default is not a function

  34 | 
  35 | 
> 36 | export const INITIAL_STATE: ImmutableAppReducerState = Immutable({
     |                                                                 ^
  37 |   activeTab: 0,
  38 |   showTab: false,
  39 |   tabName: "",

The code snippet causing the error is:

import Immutable from "seamless-immutable";

export interface AppReducerState {
  activeTab?: number | undefined;
  showTab?: boolean | undefined;
  tabName?: string | undefined;
  isDrawerOpen: boolean;
  retryAction: AnyAction[];

}

/* ------------- Initial State ------------- */

type ImmutableAppReducerState = Immutable.Immutable<AppReducerState>

export const INITIAL_STATE: ImmutableAppReducerState = Immutable({
  activeTab: 0,
  showTab: false,
  tabName: "",
  isDrawerOpen: false,
  retryAction: [],

});

Answer №1

Here is the solution to the problem:

Simply make a slight adjustment to the code provided

1. import * as Immutable from "seamless-immutable";

2. export const INITIAL_STATE: ImmutableAppReducerState = Immutable

to 

export const INITIAL_STATE: ImmutableAppReducerState = Immutable.from

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

Exploring the Power of Vercel Deployment: Crafting a Custom CORS Middleware for Your API

Recently, I have been testing different methods to avoid a CORS error in my upcoming app deployed on Vercel. The only solution that worked for me was manually setting the headers for each API request, as shown below: export default async function handler( ...

Unveiling the types of an object's keys in Typescript

I am currently utilizing an object to store a variety of potential colors, as seen below. const cardColors = { primaryGradientColor: "", secondaryGradientColor: "", titleTextColor: "", borderColor: "&quo ...

Navigating through an array in Angular 5: a guide

This question may seem simple, but I'm having trouble figuring it out. Here is the code snippet I am working with: getInstabul(): void { this.homeService.getWeather() .subscribe((weather) => { this.instanbulWeathers = weather ...

Unable to complete the installation using npm install -g react-native-cli

Encountering an issue while attempting to set up react-native-cli using the following command: npm install -g react-native-cli leads to the following error message: npm ERR! Darwin 16.7.0 npm ERR! argv "/Users/kamleshtilwani/.nvm/versions/node/v8.6.0/bi ...

Issue with type narrowing and `Extract` helper unexpectedly causing type error in a generic type interaction

I can't seem to figure out the issue at hand. There is a straightforward tagged union in my code: type MyUnion = | { tag: "Foo"; field: string; } | { tag: "Bar"; } | null; Now, there's this generic function tha ...

Angular: detecting mobile status within template

Often in my templates, I find myself repeating this type of code: <custom-button [align]="isMobile() ? 'center' : 'left'"></custom-button> This also requires me to include a method in each component to determine w ...

Is Angular's ngOnChanges failing to detect any changes?

Within one component, I have a dropdown list. Whenever the value of the dropdown changes, I am attempting to detect this change in value in another component. However, I am encountering an unusual issue. Sometimes, changing the dropdown value triggers the ...

Using jest, assess the functionality of a service and observe its behavior

I recently made the switch from using Jasmine to Jest for my Angular unit tests. I made updates to the spec code to test a service, like so: .... describe( 'My Test', () => { let myService: any; ... beforeEach(() => { my ...

An unexpected error has occurred within React Native, indicating that an object is

It's baffling why I keep receiving the error message: "undefined is not an object (evaluating '_this.props.navigation.navigate')" I am fairly new to react and have tried every possible solution but still cannot resolve this error. Belo ...

The specified 'Promise<Modules>' type argument cannot be assigned to the parameter of type '(params: any) => Promise<Modules>' in the current context

Looking for some help with this helper function that I need to call, it has the following signature: export const fetchPaginated = async <T>( callback: (params: any) => Promise<T>, { page = 1, pageSize, }: { page?: number; page ...

Troubleshooting Primevue Data table styling issues in Vue3

Currently, I am attempting to incorporate grids into my data table using primevue library. However, despite following the provided example at https://www.primefaces.org/primevue/datatable/dynamiccolumns, the gridlines are not appearing on the table. The c ...

Verify the data types of components received as props in a Typescript React application

I have a question regarding type checking in React components passed as props: What is the method for ensuring that only allowed components are passed as props? Allow me to demonstrate. We have the component we wish to pass around: type CustomProps = { ...

Tips for dragging a column in ngx-datatable to scroll the horizontal scroll bar in Angular 4

Is there a way to make the horizontal scroll bar move when dragging the column header of ngx-datatable in Angular 4? I have a situation where the first column should trigger the movement of the horizontal scroll bar when dragged from left to right. Any s ...

What steps should I take to generate a compiler error when a variable is not of the type "never"?

Imagine having a set of conditions with different possible values and wanting to cover each potential case. In the event of adding a new condition in the future but forgetting to handle it, it is important to have an error detection mechanism—ideally cat ...

What is the correct way to implement Axios interceptor in TypeScript?

I have implemented an axios interceptor: instance.interceptors.response.use(async (response) => { return response.data; }, (err) => { return Promise.reject(err); }); This interceptor retrieves the data property from the response. The re ...

Utilizing props in styled-components: A beginner's guide

I am trying to pass a URL to a component so that I can use it as the background image of the component. Additionally, I need to check if the URL is empty. Component: <BannerImg/> CSS (styled): `const BannerImg = styled.img` background-image: url( ...

"Creating a sleek and efficient AI chess game using chess.js with Angular's

Cannot read property 'moves' of undefine Hello there! I am currently working on developing a chess game using Angular. I'm facing an issue with the artificial intelligence in the game where the piece seems to get stuck in the mouse. The l ...

In order to emphasize the chosen list item following a component refresh

SCENARIO: Let's consider a scenario where I have a component named list, responsible for displaying a list of all customers. Within this list, certain conditions are set up as follows: 1) Initially, the 1st list-item (e.g. Customer 1) is selected by ...

Animating with Angular 2

As I delve into this informative resource, my goal is to incorporate some animations into my applications, but I find myself grappling with understanding how the animations are triggered. HTML Component <div class="navbar navbar-default navbar-fixed-t ...

When compiling TypeScript, the exported module cannot be located

I've encountered an issue while working on my TypeScript project. Upon compiling my code with the following configuration: { "compilerOptions": { "target": "ESNext", "module": "ESNext", & ...