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

Encountering a Typings Install Error When Setting Up angular2-localstorage in WebStorm

I am currently using Windows and WebStorm as my development environment. I attempted to install the angular2-localstorage package by running the command npm install angular2-localstorage, but encountered an error. After realizing that the angular2-localst ...

javascriptangularwebstormnpm-install

The rxjs package is failing to meet the peerDependencies requirements of its sister packages

After running npm install, I came across this error: npm ERR! Windows_NT 6.1.7601 npm ERR! argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\node_modules\\npm\ ...

node.jsangularnpmrxjs

The process of expanding a nested node in the Angular Material tree with deeply nested data

Within my Angular 7 application, I am utilizing a mat tree structure that contains nested array objects. The goal is to automatically expand specific nested sections after users make changes to the data within those sections. While I have successfully exp ...

angularangular-material-7

If the input is unmounted in react-hook-form, the values from the first form may disappear

My form is divided into two parts: the first part collects firstName, lastName, and profilePhoto, while the second part collects email, password, confirmPassword, etc. However, when the user fills out the first part of the form and clicks "next", the val ...

javascriptreactjstypescriptreact-hook-form

Disabling ESLint errors is not possible within a React environment

I encountered an eslint error while attempting to commit the branch 147:14 error Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions I'm struggling to identify the issue in the code, even ...

javascripttypescripteslint

How to update the tsconfig.json file within a VS2019 project using MSBuild?

I am working with a Visual Studio solution that contains multiple tsconfig.json files and I would like them to have different behaviors in production. My plan is to create two additional files for this purpose: tsconfig.json will contain the default sett ...

typescriptmsbuildvisual-studio-2019tsconfig

Executing a function in the view/template with Angular 2+

Whenever a function is called in the view of an Angular component, it seems to be executed repeatedly. A typical example of this scenario can be seen below: nightclub.component.ts import { Component } from '@angular/core'; @Component({ selec ...

javascriptangulartypescriptangular-components

Picture fails to load on Ionic app on the device

Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...

javascripthtmlangularionic2ionic3

What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

I have successfully added 3 images on a single slide. How can I implement *ngFor to dynamically load data? <carousel> <slide> <img src="../../assets/wts1.png" alt="first slide" style="display: inline-blo ...

angularhtmlcssangular-materialcarousel

Is it possible for me to transition to working with Angular 8 after mastering Angular 4?

After mastering Angular 4, I'm interested in knowing the key distinctions between it and Angular 8. What new concepts or features do I need to familiarize myself with beyond what I already know from Angular 4? Thank you for your help. ...

angular

Error: The reference 'GetServerSideProps' is being incorrectly used as a type instead of a value. Perhaps you intended to use 'typeof GetServerSideProps' instead?

Index.tsx import Image from 'next/image' import Head from "next/head" import { sanityClient, urlFor } from "../sanity" import Link from 'next/link' import {Collection, address} from '../typings'; import ...

typescriptnext.js

angular - apply custom background styles without resorting to disabling ViewEncapsulation

I can't seem to figure out why I'm struggling to set the background of my component correctly without having to use ViewEncapsulation.None. Currently, with ViewEncapsulation.None, my styles look like this: * { margin: 0; padding: 0; ...

cssangular

Leveraging Angular2's observable stream in combination with *ngFor

Below is the code snippet I am working with: objs = [] getObjs() { let counter = 0 this.myService.getObjs() .map((obj) => { counter = counter > 5 ? 0 : counter; obj.col = counter; counter++; return view ...

javascriptangulartypescriptrxjs

Angular - optional parameter in route using ngRouter

I have a question regarding using Angular (4) with the @angular/router. I want to be able to include optional parameters in a path style, but am facing some challenges. Currently, my code looks like this: { path: 'cars', component: CarComponent ...

angulartypescriptroutesangular-router

Creating a custom hook to detect when multiple elements are hovered over

I am currently working on creating a hook that can identify when hover is triggered over specific buttons. Here is what I have so far: enum options { buttonOne: 'buttonOne', buttonTwo: 'buttonTwo' } type HoverType= { [key in opti ...

reactjstypescript

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

javascriptcssreactjstypescriptmaterial-ui

Angular 7 - ngForm and ngSubmit: Resubmitting outdated data

I have a form in Angular 7 set up like this: <form #payForm="ngForm" (ngSubmit)="onSubmit(payForm, $event)" method="POST" action="POST URL HERE"> <input type="hidden" name="requestParameter" [value]="stringToSend" /> <div class= ...

angularangular7

The text inside the Mapbox GL popup cannot be highlighted or copied

I'm encountering an issue where the text in my popups is unselectable. Even though I can close the popups through various methods, such as clicking on them, the pointer remains as a hand icon when hovering over the text and doesn't change to the ...

reactjstypescriptmapbox-gl-jsmapbox-glreact-map-gl

Unable to associate a model with an additional attribute in objection because of a TypeScript issue

I'm attempting to establish a connection between two models while adding an additional property called "url": if (typeof session.id === "number") { const sessionUser = await Session.relatedQuery("users") .for(session.id) .relate({ id: ...

typescriptobjection.js

The test suite encountered an error (EBUSY: resource busy or locked) and unfortunately failed to run at Nx version 14.5.10 and Jest version 27.5.1. It seems there was an

I have recently upgraded my NX Monorepo from version 13 to 14, and everything seems to be working fine except for the Jest migration. I keep encountering this error even after trying various solutions like clearing the cache, deleting node_modules, and rei ...

javascriptangularjestjsts-jestnomachine-nx