(Broken Storyshots) TypeError: Cannot read property 'createStringLiteral' of undefined (Using ^8.3.0 of jest-preset-angular

Question

After upgrading to jest-angular-preset ^8.3.0 and attempting to run structural testing, with npm run I see the error below:

● 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

Additional context I apologize if this isn't the right place to ask this question between here and the jest-preset-angular issues board I'm not too sure.

However, from seeing other solutions posted on other boards, these are the versions of important dependencies that I upgraded to in order to get to this point: "jest": "^27.0.1", "jest-preset-angular": "^8.3.1", "ts-jest": "^27.0.1", "typescript": "~3.8.3"

I also cleared the jest cache as well.

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"
}
}
}

Answer 1

I had the same problem when I increased the version of the Jest to 27.0.6. What helped me solve that was the increase in the following dev dependencies in the 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",

And then I had to modify the file responsible for configuring the tests (test.ts in my case), to import the jest-preset-angular like this import 'jest-preset-angular/setup-jest'. Finally, in jest.config.js I added these props:

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

How I figured this out - I looked at the CHANGELOG.md files of each dependency for any breakthrough changes as there were significant version increases.