Encountered Error: Unknown property 'createStringLiteral', causing TypeError in the Broken Storyshots. This issue is happening while using version ^8.3.0 of jest-preset-angular

When I upgraded to jest-angular-preset ^8.3.0 and tried to execute structural testing with npm run, I encountered the following error:

● Test suite failed to run

TypeError: Cannot read property 'createStringLiteral' of undefined

  at Object.getCreateStringLiteral (../../node_modules/jest-preset-angular/build/TransformUtils.js:5:12)
  at ../../node_modules/ts-jest/dist/compiler/ts-compiler.js:169:42
      at Array.map (<anonymous>)
  at TsCompiler._makeTransformers (../../node_modules/ts-jest/dist/compiler/ts-compiler.js:168:47)
  at Object.getCustomTransformers (../../node_modules/ts-jest/dist/compiler/ts-compiler.js:219:63)
  at Object.getEmitOutput (../../node_modules/typescript/lib/typescript.js:136021:73)
  at TsCompiler.getCompiledOutput (../../node_modules/ts-jest/dist/compiler/ts-compiler.js:128:48)
  at TsJestCompiler.getCompiledOutput (../../node_modules/ts-jest/dist/compiler/ts-jest-compiler.js:13:39)
  at TsJestTransformer.process (../../node_modules/ts-jest/dist/ts-jest-transformer.js:146:37)

System
Environment Info:

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 89.0.4389.128
Edge: Spartan (44.19041.964.0), Chromium (91.0.864.54)
npmPackages:
@storybook/addon-a11y: ^6.1.15 => 6.1.15
@storybook/addon-actions: ^6.1.15 => 6.1.15
@storybook/addon-docs: ^6.1.15 => 6.1.15
@storybook/addon-jest: ^6.1.15 => 6.1.15
@storybook/addon-knobs: ^6.1.15 => 6.1.15
@storybook/addon-links: ^6.1.15 => 6.1.15
@storybook/addon-notes: ^5.3.21 => 5.3.21
@storybook/addon-storyshots: ^6.2.9 => 6.2.9
@storybook/addon-storysource: ^6.1.15 => 6.1.15
@storybook/addon-viewport: ^6.1.15 => 6.1.15
@storybook/addons: ^6.1.15 => 6.1.15
@storybook/angular: ^6.1.15 => 6.1.15
@storybook/storybook-deployer: ^2.8.7 => 2.8.7

Extra information: I'm not certain if this is the appropriate place to inquire about this issue, as I'm caught between here and the jest-preset-angular issues board.

However, in my progression towards this point based on solutions from other boards, I upgraded these significant dependencies to the following versions: "jest": "^27.0.1", "jest-preset-angular": "^8.3.1", "ts-jest": "^27.0.1", "typescript": "~3.8.3"

I also made sure to clear the jest cache.


jest.config.js:
module.exports = {
verbose: true,
preset: 'jest-preset-angular',
testRegex: './*\.structural.test\.ts$',
setupFilesAfterEnv: ['./setupTests.ts'],
transformIgnorePatterns: ['/node_modules/'],
globals: {
'ts-jest': {
tsConfig: "tsconfig.spec.json"
}
}
}
angulartypescriptstorybookts-jestangular-storybook

Answer №1

Encountering the same issue after upgrading Jest to version 27.0.6, I managed to resolve it by updating certain dev dependencies in my package.json:

  1. "@types/jest": "^26.0.23",
  2. "jest": "^27.0.6",
  3. "jest-preset-angular": "^9.0.4",
  4. "ts-node": "^9.0.0",

In addition, I had to make adjustments to the test configuration file (in my case, test.ts) by importing jest-preset-angular using 

import 'jest-preset-angular/setup-jest'
. Furthermore, I updated the jest.config.js with the following settings:

  1. modulePaths: ['<rootDir>'],
  2. testEnvironment: 'jsdom',
  3. testRunner: 'jest-jasmine2',

This solution was derived from examining the CHANGELOG.md files of each dependency for significant version changes.

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

The result of comparing with `instanceof` in TypeScript

class Department { name: string; constructor(n: string) { this.name = n; } describe(this: Department){ console.log('department: ' +this.name); } } const frontend = new Department('frontend'); frontend.describe(); con ...

typescript

What is the best way to establish communication between sibling components in an Angular 2+ application?

I am working with 3 components that need to communicate with one another. Initially attempted using services, but they did not resolve my issue. Seeking assistance for a solution. ...

angular

Adjust the color of the text in Ionic based on the condition

My current solution involves highlighting text in a small slider after a user tap, but it feels very makeshift. <ion-slide *ngFor="let loopValue of values"> <div *ngIf="viewValue == loopValue"> <b> {{loopValue}} </b> ...

cssangularionic-frameworkionic3

Tips on organizing a typescript object/StringMap in reverse order to prioritize the last element

I've just started working with TS/React in a .tsx file and I'm trying to add a key/value pair to a StringMap at the very first index. Below is the code snippet that: takes the StringMap 'stats' as input, iterates through each row, re ...

reactjstypescriptdictionarytsx

The Material-UI TextField is placed in the Header section of the page

As I scroll down the page, I noticed that the TextField in the header area remains visible. This header is styled using CSS and includes a TextField from the material-ui library. This is my first time creating a header with CSS. Are there any specific cod ...

cssreactjstypescriptmaterial-ui

Struggling to send information to the data layer on every page in Angular 9

Currently, I am in the process of integrating a GTM snippet into my Angular project. However, I have noticed that when the page is hard reloaded, it pushes data but does not do so during normal navigation. I have already added the GTM snippet provided by ...

javascriptangulartypescript

Angular-cli working in conjunction with an express project

I am currently working on a project that involves Express, MongoDB, and the REST API. I now want to integrate Angular into the project using angular-cli. However, I have several questions about the process. Here is the current structure of my project: htt ...

angularmongodbexpressangular-clinodemon

Using Angular to Trigger a Keyboard Shortcut with a Button

Currently working on an Angular project that includes an event slideshow feature. Looking to make the slideshow go full screen when a button is clicked (Windows - fn+F11). Any tips on implementing a keyboard shortcut function in Angular? Appreciate any h ...

angular

Update: Git is not currently keeping track of the Angular project

After creating an Angular 5 project in a local branch, I encountered an issue when trying to add/commit/push that branch to origin. Despite Bitbucket confirming the commit, the angular project did not appear in my branch in the remote repository. Strangel ...

angulargitbitbucket

Ways to indicate in Typescript that a value, if it exists, is not undefined

Is there a way to represent the following logic in TypeScript? type LanguageName = "javascript" | "typescript" | "java" | "csharp" type LanguageToWasmMap = { [key in LanguageName]: Exclude<LanguageName, key> ...

typescript

Customizing the appearance of a form control in response to its value in Angular's Reactive

I have a unique query regarding formatting text related to formControl in an application where the formControls are created using FormBuilder and arrays of formControls. This inquiry involves retrieving the current value of a formControl and altering the ...

angularionic-frameworkreactiveformbuilder

How can I establish a connection to a Unix socket path using a connection string with Slonik?

Hey there! I encountered an issue while attempting to connect to a Google Cloud database using slonik: const pool = createPool( `socket:userName:password@/cloudsql/teest-123986:europe-west3:test?db=dbName` ) The error message I received was: error: throw ...

typescriptpostgresqlslonik

Testing the Angular router-outlet using Jasmine

When testing web-app navigation using Jasmine spec with RouterTestingModule, I am facing challenges with nested fixture.whenStable().then(() => {}). For instance: After clicking on multiple links where the router-outlet changes the displayed component ...

angulartypescriptasynchronousjasminerouter-outlet

A guide to activating tag selection within the DevExtreme tag box

I'm currently utilizing devExtereme within my Angular project. My goal is to enable the selection of text within tags in my tagbox component. Here's what I have implemented: <dx-tag-box [dataSource]="sourves" [value]="value&quo ...

javascripthtmlangulardevextremedevextreme-angular

What is the proper way to access the current value of a computed property from within its own computation method?

Our goal is to activate a query when a string reaches a length of 3 characters or more, and keep it activated once triggered. Leveraging the Vue 2 Composition API, we have implemented a reactive object to manage the status of queries: import { computed, de ...

typescriptvue.jsvuejs2vuejs3vue-composition-api

Unexpected behavior in resolving modules with Babel (using node and typescript)

Within my node project setup, I utilize babel-plugin-module-resolver for managing relative paths efficiently. tsconfig.json { "compilerOptions": { "outDir": "build", "target": "es5", ...

node.jstypescriptbabeljseslintbabel-plugin-module-resolver

The angular matAutocomplete box is positioned beneath the bootstrap navbar element

Trying to integrate angular material matAutocomplete mat-options into a bootstrap Navbar, here's what the code looks like: <li class="nav-item"> <form class="example-form"> <mat-form-field class="example-full-width"> < ...

angularbootstrap-4angular-material

Exploring ways to fetch an HTTP response using a TypeScript POST request

I have been looking at various questions, but unfortunately, none of them have provided the help I need. The typescript method I am currently working with is as follows: transferAmount(transfer: Transfer): Observable<number> { return this.http .po ...

angulartypescripthttppost

The issue of Storybook webpack failing to load SCSS files persists

I'm running into an issue where my styles are not loading in Storybook, even though I'm not getting any errors. Can someone help me out? My setup involves webpack 2.2.1. I've scoured Stack Overflow and GitHub for solutions, but nothing seem ...

javascriptreactjswebpacksassstorybook

Enhance typescript interfaces with third-party library components in React.js

As a newcomer to typescript, I am in the process of converting my existing react project to use typescript. After changing my files to tsx, I encountered several errors which I managed to resolve except for one type-related issue that I couldn't find ...

reactjstypescriptantd