Jest-preset-angular: Error loading html template

[4kochi]

This preset is really cool. Now our tests run a lot faster. But we have a little issue.

We have an Angular2 project and additionally an Angular 2 component lib (my-ui-lib), which includes all the shared components. The components lib is installed as a node module and includes all the code in .ts

I have added the following setting in the jest configuration in the package.json:

"transformIgnorePatterns": [
  "node_modules/(?!my-ui-lib)"
]

Now all components in my-ui-lib will by transformed to js and the tests in the project compile and run with jest.

But in some tests I get the following error:

Cannot find module 'ul-action-bar.component.html' from 'ul-action-bar.component.ts'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:176:17)
  at Object.<anonymous> (node_modules/my-ui-lib/src/lib/components/container/ul-action-bar/ul-action-bar.component.ts:14:19)

ul-action-bar is a component with a template. Here the code:

import { Component } from '@angular/core';

@Component({
  selector: 'ul-action-bar',
  styleUrls: ['ul-action-bar.component.scss'],
  templateUrl: 'ul-action-bar.component.html'
})

export class UlActionBarComponent { }

So it seems like the .html file cannot be resolved. Do you have any idea what the problem might be?

[thymikee]

Does it work with relative import?

templateUrl: './ul-action-bar.component.html'

[4kochi]

That was a fast answer 🏎. It seems to work now. I will change this in all my components and than I can say it for sure. Thanks.

[thymikee]

Is setting absolute imports to html always resolved to adjacent html file? I think I could add a moduleNameMapper to handle that

[4kochi]

It works in Angular 2.x and webpack. But I have not tested Angular 4.x yet.

I just looked at the angular documentation and the code the angular-cli produces. It seems like it's best practice to use the relative path anyway. So I will change my components.

[thymikee]

CLI generates relative paths (example directory is generated with CLI).

btw, awesome to hear it works for you and it's a change for better ❤️!

[PsychicCat]

I'm experiencing this issue but I am using relative imports. Anyone else?

[catull]

@thymikee
Tests only run when I use

template: `some embedded HTML`

, but they fail when using

templateUrl: './some.component.html'

This is with Angular 6.0.4, Node 10.8.0, npm 6.3.0.
Jest is "^23.4.2", jest-preset-angular is "^6.0.0".

I have these lines in package.json:

"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/jest-config.ts",
    "bail": true,
    "collectCoverage": false,
    "globals": {
      "ts-jest": {
        "tsConfigFile": "tsconfig.json"
      }
    },
    "roots": [ "src" ],
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.spec\\.ts$": "ts-jest"
    },
    "verbose": true
  }

The error is

 FAIL  src/app/pages/home/home.component.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    workspace/js/eshab/ehb-ui-web.git/src/app/pages/home/home.component.html:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class='container'>
                                                                                             ^
    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at src/app/pages/home/home.component.ts:19:19
      at Object.<anonymous> (src/app/pages/home/home.component.ts:23:2)

[ahnpnl]

hi @catull Please check the folder example in the repository and follow the configuration there. It is an example app which was already configured to run with this preset.

[thymikee]

You overriden default transformer with ts-jest, that's why you can process HTML files. Please use default configuration where possible.

[catull]

Thanks, got it to work now.