Jest matcher import is breaking webpack projects.

[baremaximum]

The Issue

This project, or one of its dependencies, has an incorrect import path. This causes the test suite to crash whenever the rxSandbox.create() function is called.

The offending import is here: https://github.com/kwonoj/rx-sandbox/blob/master/src/assert/marbleAssert.ts

Steps to reproduce:

Create a new Angular project. Import rxSandbox and call the create() function.

Error Log

ERROR in ./node_modules/jest-matchers/node_modules/pretty-format/build-es5/plugins/ReactElement.js
Module not found: Error: Can't resolve 'babel-runtime/helpers/typeof' in 'E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\build-es5\plugins'
resolve 'babel-runtime/helpers/typeof' in 'E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\build-es5\plugins'
  Parsed request is a module
  using description file: E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\package.json (relative path: ./build-es5/plugins)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in E:/test/dddd
        using description file: E:\test\dddd\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: E:\test\dddd\package.json (relative path: ./babel-runtime/helpers/typeof)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\babel-runtime\helpers\typeof doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\babel-runtime\helpers\typeof.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\babel-runtime\helpers\typeof.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\babel-runtime\helpers\typeof.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\babel-runtime\helpers\typeof.js doesn't exist
            as directory
              E:\test\dddd\babel-runtime\helpers\typeof doesn't exist
      E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\build-es5\plugins\node_modules doesn't exist or is not a directory
      E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\build-es5\node_modules doesn't exist or is not a directory
      E:\test\dddd\node_modules\jest-matchers\node_modules\node_modules doesn't exist or is not a directory
      E:\test\dddd\node_modules\node_modules doesn't exist or is not a directory
      E:\test\node_modules doesn't exist or is not a directory
      E:\node_modules doesn't exist or is not a directory
      looking for modules in E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules
        using description file: E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in E:\test\dddd\node_modules\jest-matchers\node_modules
        using description file: E:\test\dddd\node_modules\jest-matchers\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in E:\test\dddd\node_modules
        using description file: E:\test\dddd\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\package.json (relative path: ./node_modules/babel-runtime/helpers/typeof)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
          using description file: E:\test\dddd\node_modules\jest-matchers\package.json (relative path: ./node_modules/babel-runtime/helpers/typeof)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
          using description file: E:\test\dddd\package.json (relative path: ./node_modules/babel-runtime/helpers/typeof)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\babel-runtime\helpers\typeof doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\babel-runtime\helpers\typeof.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\babel-runtime\helpers\typeof.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\babel-runtime\helpers\typeof.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.js doesn't exist
            as directory
              E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof doesn't exist
              E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.js doesn't exist
            as directory
              E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof doesn't exist
              E:\test\dddd\node_modules\babel-runtime\helpers\typeof.js doesn't exist
            as directory
              E:\test\dddd\node_modules\babel-runtime\helpers\typeof doesn't exist
[E:\test\dddd\babel-runtime\helpers\typeof]
[E:\test\dddd\babel-runtime\helpers\typeof.ts]
[E:\test\dddd\babel-runtime\helpers\typeof.tsx]
[E:\test\dddd\babel-runtime\helpers\typeof.mjs]
[E:\test\dddd\babel-runtime\helpers\typeof.js]
[E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\build-es5\plugins\node_modules]
[E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\build-es5\node_modules]
[E:\test\dddd\node_modules\jest-matchers\node_modules\node_modules]
[E:\test\dddd\node_modules\node_modules]
[E:\test\node_modules]
[E:\node_modules]
[E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof]
[E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof]
[E:\test\dddd\node_modules\babel-runtime\helpers\typeof]
[E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.ts]
[E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.ts]
[E:\test\dddd\node_modules\babel-runtime\helpers\typeof.ts]
[E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.tsx]
[E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.tsx]
[E:\test\dddd\node_modules\babel-runtime\helpers\typeof.tsx]
[E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.mjs]
[E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.mjs]
[E:\test\dddd\node_modules\babel-runtime\helpers\typeof.mjs]
[E:\test\dddd\node_modules\jest-matchers\node_modules\pretty-format\node_modules\babel-runtime\helpers\typeof.js]
[E:\test\dddd\node_modules\jest-matchers\node_modules\babel-runtime\helpers\typeof.js]
[E:\test\dddd\node_modules\babel-runtime\helpers\typeof.js]
 @ ./node_modules/jest-matchers/node_modules/pretty-format/build-es5/plugins/ReactElement.js 1:128-167
 @ ./node_modules/jest-matchers/node_modules/pretty-format/build-es5/index.js
 @ ./node_modules/jest-matchers/node_modules/jest-matcher-utils/build-es5/index.js
 @ ./node_modules/jest-matchers/build/matchers.js
 @ ./node_modules/rx-sandbox/dist/src/assert/marbleAssert.js
 @ ./node_modules/rx-sandbox/dist/src/index.js
 @ ./src/app/app.component.spec.ts
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts

[kwonoj]

I think this is due to nature of jest itself which is not intended to be used in browser environment. Same goes for this pkg, it is intended to be used as test suite without any bundler support.

I am unsure if this can be fixed in viable timeframe as I do not have any env attempt to bundle this pkg. If you have quick fix to suggest, welcome to have PR.

[selangley-wa]

For what it's worth, I get similar errors for a different angular project.

This sample project by Michael Hoffmann using rx-sandbox and Angular 8.0.1 works as expected when running jasmine tests via the browser using karma:
https://github.com/Mokkapps/angular-rx-sandbox-marble-diagram

If you keep upgrading the angular-cli, you eventually reach a point where it breaks. Specifically, it breaks similarly to the reported issue when you go from:

    "@angular-devkit/build-angular": "0.803.22",
    "@angular/cli": "8.3.22",

to:

    "@angular-devkit/build-angular": "0.803.23",
    "@angular/cli": "8.3.23",

Looking at the differences between versions, I'm not sure why it starts erroring:

(angular/angular-cli@v8.3.22...v8.3.23

[selangley-wa]

I was able to narrow down why angular stopped working with rx-sandbox to this commit:

fix(@angular-devkit/build-angular): replace istanbul-instrumenter-loader with coverage-istanbul-loader

where core-js@2 was removed in favor of core-js@3, babel@6 was removed as a dependency, among other changes.

[selangley-wa]

Another follow-up. The compatibility issues I was having with later versions of angular go away with the recent changes to rx-sandbox that depend on updated versions of the jest libraries, including the switch from jest-matchers to jest's expect package.

Perhaps you could release such a version as rx-sandbox@1.04 that incorporated all those changes except for the migration to RxJS 7 on a 1.x branch?

[kwonoj]

I'll give it a go but can't promise I can do it 100%, there was se rough edges if I recall correctly.

[selangley-wa]

Here's mine that seems to work. .
https://github.com/selangley-wa/rx-sandbox/tree/1.x

In my angular 8 project that consumes rx-sandbox, I had to set the value:
"skipLibCheck": false,
in the compilerOptions in the tsconfig.json file in order to avoid the error:

ERROR in node_modules/rx-sandbox/dist/scheduler/TestScheduler.d.ts:18:9 - error TS1086: An accessor cannot be declared in an ambient context.

18     get maxFrame(): number;

[kwonoj]

if you have working changes already, I'd welcome & appreciate PR 😅

[selangley-wa]

Want to create a 1.x branch for my PR to target?

[kwonoj]

Good point, let me try.

[kwonoj]

@selangley-wa https://github.com/kwonoj/rx-sandbox/tree/release-1.x is up

[kwonoj]

published 1.0.4.