unit tests not working when importing @stencil/redux

[scaljeri]

I have this issue that when I try to unit test my component I get errors when that component imports @stencil/redux

To create this test project I just did

$> npm init stencil

I installed redux and @stencil/redux so my package.json looks like

{
  "name": "error",
  "version": "0.0.1",
  "description": "Stencil Component Starter",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/error/error.js",
  "files": [
    "dist/",
    "loader/"
  ],
  "scripts": {
    "build": "stencil build --docs",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },
  "devDependencies": {
    "@stencil/core": "^1.8.4",
    "@types/jest": "24.0.25",
    "@types/puppeteer": "1.20.3",
    "jest": "24.9.0",
    "jest-cli": "24.9.0",
    "puppeteer": "1.20.0"
  },
  "license": "MIT",
  "dependencies": {
    "@stencil/redux": "^0.1.2",
    "redux": "^4.0.5"
  }
}

This is what my-component.tsx looks like:

import { Component, h } from '@stencil/core';
import '@stencil/redux';

@Component({
    tag: 'my-component',
    styleUrl: 'my-component.css',
    shadow: true
})
export class MyComponent {
    render() {
        return <div>Hello, World!</div>;
   }
}

And the my-component.spec.ts file

import { MyComponent } from "./my-component";

describe("my-component", () => {
    it("builds", () => {
        expect(new MyComponent()).toBeTruthy();
    });
});

Thats it, now when I run the test I get the following error:

$> yarn test
yarn run v1.21.1
$ stencil test --spec --e2e
[49:05.0]  @stencil/core v1.8.6 🚚
[49:05.1]  testing e2e and spec files
[49:05.1]  build, error, dev mode, started ...
[49:05.2]  transpile started ...
[49:05.2]  transpile finished in 5 ms
[49:05.2]  copy started ...
[49:05.2]  generate styles started ...
[49:05.2]  bundling components started ...
[49:05.3]  generate styles finished in 52 ms
[49:06.0]  copy finished (0 files) in 749 ms
[49:06.0]  bundling components finished in 744 ms
[49:06.0]  build finished in 908 ms

[49:06.1]  jest args: --e2e --spec --max-workers=16
 PASS  src/utils/utils.spec.ts
 FAIL  src/components/my-component/my-component.spec.ts
  ● Test suite failed to run

    Cannot find module '../esm/index.js' from 'index.js'

    However, Jest was able to find:
        './my-component.css'
        './my-component.spec.ts'
        './my-component.tsx'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['ts', 'tsx', 'js', 'jsx', 'json'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (node_modules/@stencil/redux/dist/index.js:2:18)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        0.677s, estimated 1s
Ran all test suites.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

If I remove import '@stencil/redux'; from my-component it all works again like a charm

This error show similarities with this issue

[apparecidoo]

I changed the import in app root and it works fine.

import '@stencil/redux';
to
import "@stencil/redux/dist/esm/index";

The reason below:
When you run the tests using @stencil/[email protected], on the resolve module process, jest uses @Stencil\redux\dist\index.js and in this file the index.js relative path is not right. Maybe it's a bug.

Inside @Stencil\redux\dist\index.js has a WRONG path:

// stencilredux: CommonJS Main
module.exports = require('../esm/index.js');

And the RIGHT path should be:

// stencilredux: CommonJS Main
module.exports = require('./esm/index.js');

[thccorni]

Alternatively adding a moduleNameMapper config for jest did work for me too:

moduleNameMapper: {
  '@stencil/redux': '@stencil/redux/dist/esm/index',
},