Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Transforming HTML errors out when using "ts-jest" as transform, instead of preprocessor

See original GitHub issue

Here’s my jest.config.js:

module.exports = {
  "verbose": true,
  "preset": "jest-preset-angular",
  "globals": {
    "ts-jest": {
      "tsConfigFile": "client/tsconfig.spec.json",
      "skipBabel": true
    },
    "\_\_TRANSFORM_HTML\_\_": true
  },
  "transform": {
    "^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js"
  },
  "cacheDirectory": "./.jest-cache",
  "testURL": "http://localstorage:8080",
  "testMatch": [
    "**/+(*.)+(spec|test).+(ts|js)"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/",
    "/tests/integration/"
  ],
  "moduleNameMapper": {
    "app/(.*)": "<rootDir>/client/app/$1",
    "store/(.*)": "<rootDir>/client/store/$1",
    "services/(.*)": "<rootDir>/client/services/$1",
    "models/(.*)": "<rootDir>/client/models/$1",
    "common/models": "<rootDir>/common/models",
    "shared/(.*)": "<rootDir>/client/app/shared/$1",
    "test-helpers/(.*)": "<rootDir>/client/test-helpers/$1"
  },
  "modulePaths": [
    "<rootDir>/client/"
  ],
  "moduleFileExtensions": [
    "ts",
    "js",
    "html"
  ],
  "coverageReporters": [
    "json",
    "lcov"
  ],
  "coverageDirectory": "coverage",
  "setupFiles": [
    "jest-localstorage-mock"
  ],
  "setupTestFrameworkScriptFile": "<rootDir>/client/test-helpers/setupJest.ts"
};

This works fine, but throws a deprecation warning for the transform. If I switch the transform to:

"transform": { "^.+\\.(ts|js|html)$": "ts-jest" },

then I get errors on every component test:

This test module uses the component MyComponent which is using a “templateUrl” or “styleUrls”, but they were never compiled. Please call “TestBed.compileComponents” before your test.

What’s going on here?

Issue Analytics

State:
Created 5 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

15reactions

mcblumcommented, Dec 27, 2018

@ilancohen did you get this to work? I’m seeing the exact same errors where almost all tests are failing with:

This test module uses the component MyComponent which is using a “templateUrl” or “styleUrls”, but they were never compiled. Please call “TestBed.compileComponents” before your test.

1reaction

CraigHolloway24commented, Apr 4, 2019

jest-preset-angular can not be updated as the new version does not play nicely with https://github.com/nrwl/nx/issues/1059

So if you’re having issues it could be because of nrwl/nx

Top Results From Across the Web

Code Transformation - Jest

A transformer is a module that provides a method for transforming source files. For example, if you wanted to be able to use...

TypeError: Jest: a transform must export a `process` function

I have tried different configurations with the jest.config.js file but not able to resolve this error. Any pointers to resolve this issue would ......

jest-preset-angular - npm

This tells ts-jest (a preprocessor this preset using to transform TS files) to treat JS files the same as TS ones. Transpile js...

jest transform node_modules - You.com | The AI Search ...

This error shows that "react-native" has not been transformed: ... can't transform a folder inside node_modules with ts-jest.

babel-jest | Yarn - Package Manager

Jest plugin to use babel for transformation. ... are already using jest-cli , add babel-jest and it will automatically compile JavaScript code using...