Jest tests failed when you extend component with other class

[alepop]

Stencil version:

 @stencil/core@0.0.6

I'm submitting a:

• bug report
• feature request
• support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
When you import class from another module it causes error on a test.

 FAIL  src/components/my-name/my-name.spec.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'replace' of undefined

      at escapeString (node_modules/typescript/lib/typescript.js:9438:17)
      at escapeNonAsciiString (node_modules/typescript/lib/typescript.js:9461:13)
      at Object.getLiteralText (node_modules/typescript/lib/typescript.js:7507:34)
      at getLiteralTextOfNode (node_modules/typescript/lib/typescript.js:70221:23)
      at emitLiteral (node_modules/typescript/lib/typescript.js:68553:24)
      at pipelineEmitExpression (node_modules/typescript/lib/typescript.js:68451:28)
      at pipelineEmitWithHint (node_modules/typescript/lib/typescript.js:68194:49)
      at emitNodeWithSourceMap (node_modules/typescript/lib/typescript.js:65580:24)
      at pipelineEmitWithSourceMap (node_modules/typescript/lib/typescript.js:68184:17)
      at emitNodeWithNestedComments (node_modules/typescript/lib/typescript.js:65895:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.12s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Expected behavior:
There is no error during the test

Steps to reproduce:

Update code of the stencil-starter to this:
./src/utils/index.ts:

export class SomeBase {
  public log() {
    console.warn('log');
  }
}

./src/components/my-name/my-name.tsx:

import { Component, Prop } from '@stencil/core';
import { SomeBase } from '../../utils';

@Component({
  tag: 'my-name',
  styleUrl: 'my-name.scss'
})
export class MyName {

  @Prop() first: string;

  @Prop() last: string;

  render() {
    return (
      <div>
        Hello, my name is {this.first} {this.last}
      </div>
    );
  }
}

the same error happens when i extend component with imported class

import { Component, Prop } from '@stencil/core';
import { SomeBase } from '../../utils';

@Component({
  tag: 'my-name',
  styleUrl: 'my-name.scss'
})
export class MyName extends SomeBase {
  constructor() {
    super();
  }

  @Prop() first: string;

  @Prop() last: string;

  render() {
    this.log();
    return (
      <div>
        Hello, my name is {this.first} {this.last}
      </div>
    );
  }
}

Project structure:

.
├── LICENSE
├── package-lock.json
├── package.json
├── readme.md
├── src
│   ├── assets
│   │   └── icon
│   │       ├── favicon.ico
│   │       └── icon.png
│   ├── components
│   │   └── my-name
│   │       ├── my-name.scss
│   │       ├── my-name.spec.ts
│   │       └── my-name.tsx
│   ├── components.d.ts
│   ├── index.html
│   ├── manifest.json
│   └── utils
│       └── index.ts
├── stencil.config.js
├── tsconfig.json
└── www

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to upload that code to a GitHub repo for me to pull down?

[alepop]

@kensodemann https://github.com/alepop/stencil-component-starter/tree/broken-jest-test

[kensodemann]

@alepop - Thank you for the repo.

I was able to come up with some workarounds for you.

First, make the base class a component as such:

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

@Component({
  tag: 'some-base'
})
export class SomeBase {
  public log() {
    console.warn('log');
  }
}

That fixes the test. There is code that is processing the meta-data as we translate the TypeScript into JavaScript for Jest. This is apparently not expecting naked base classes.

Now the tests will work.

But... this still won't build:

~/Projects/Issues/stencil-component-starter (fix/broken-jest-test *): npm run build

> @stencil/starter@0.0.1 build /Users/kensodemann/Projects/Issues/stencil-component-starter
> stencil build --prerender

[39:52.6]  @stencil/core v0.0.6 
[39:52.6]  build, prod mode, started ... 
[39:52.6]  compile started ... 
[39:54.1]  compile finished in 1.51 s 
[39:54.1]  bundle styles started ... 
[39:54.1]  bundle modules started ... 
[39:54.3]  bundle styles finished in 136 ms 
[39:54.5]  bundle modules finished in 340 ms 
[39:54.5]  generate service worker started ... 
[39:54.6]  generate service worker finished in 40 ms 

[ ERROR ]  Could not resolve '../../utils' from dist/collection/components/my-name/my-name.js 

[ ERROR ]  Minify JS
           Unexpected token: punc (,) 

[39:54.6]  build failed in 1.99 s 


[ ERROR ]  Could not resolve '../../utils' from dist/collection/components/my-name/my-name.js 

[ ERROR ]  Minify JS
           Unexpected token: punc (,) 

To get around this, rename the file from utils/index.ts to utils/some-base.ts

I created a PR against your repo to show these fixes.

alepop/stencil-component-starter#1

[alepop]

@kensodemann good job! Thank you so much! Keep going with your amazing project

[kensodemann]

To get around this, rename the file from utils/index.ts to utils/some-base.ts

A bit more on that. I got to thinking why I had to do that, looking more into the error message.

Another workaround is to leave the name of the file as utils/index.ts and then change the import statement to import { SomeBase } from '../../utils/index';

I am not really sure I like that as solution, though, since each base component should really be in its own file named after the class that is in it (at least if following LIFT to any degree), so I much prefer utils/some-base.ts

[kensodemann]

We have an open issue already on that last bit: #235

So the end result of this issue is just clarifying how extending a base-class should work.

[manucorporat]

fixed 4cc7e63