[Bug]: Stories that import RouterTestingModule throws `beforeEach not defined` error

[SuneRadich]

Describe the bug

If you run Storybook with Angular, and have a story that imports RouterTestingModule the story will throw the following js error:

beforeEach is not defined
ReferenceError: beforeEach is not defined
    at ./node_modules/@angular/core/fesm2022/testing.mjs (http://localhost:4401/vendors-node_modules_angular_router_fesm2022_testing_mjs-node_modules_storybook_angular_dist_-03a309.iframe.bundle.js:27083:1)
    at __webpack_require__ (http://localhost:4401/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4401/runtime~main.iframe.bundle.js:338:21)
    at ./node_modules/@angular/router/fesm2022/testing.mjs (http://localhost:4401/vendors-node_modules_angular_router_fesm2022_testing_mjs-node_modules_storybook_angular_dist_-03a309.iframe.bundle.js:34514:79)
    at __webpack_require__ (http://localhost:4401/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4401/runtime~main.iframe.bundle.js:338:21)
    at ./libs/abetest/src/lib/use-router/use-router.component.stories.ts (http://localhost:4401/src-lib-use-router-use-router-component-stories.iframe.bundle.js:46:81)
    at __webpack_require__ (http://localhost:4401/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4401/runtime~main.iframe.bundle.js:338:21)
    at http://localhost:4401/main.iframe.bundle.js:32:10

To Reproduce

I have uploaded a small project with a single story that showcase the issue

https://github.com/SuneRadich/beforeEachError

System

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Safari: 16.5.1
  npmPackages:
    @storybook/addon-essentials: 7.3.1 => 7.3.1 
    @storybook/addon-interactions: ^7.2.1 => 7.3.1 
    @storybook/angular: 7.3.1 => 7.3.1 
    @storybook/core-server: 7.3.1 => 7.3.1 
    @storybook/jest: ~0.1.0 => 0.1.0 
    @storybook/test-runner: ^0.13.0 => 0.13.0 
    @storybook/testing-library: ~0.2.0 => 0.2.0

Additional context

I use Storybook and Angular in a nx (nx.dev) mono-repo, so it might be related to something there. But it seems to be related to some changes in Angular and Storybook.

[yngvebn]

Workaround:

In your preview_head.html add the following script block to the top of the file:

<script>
    window.beforeEach = window.beforeEach || (() => {});
    window.afterEach = window.afterEach || (() => {});
</script>

This will effectively monkey-patch the beforeEach and afterEach that the testing internals that are exposed.

Seems this bug was caused by the following commit https://github.com/angular/angular/commit/0b14e4ef742b1c0f73d873e2c337683b60f46845 released in Angular 16.2.0

So another workaround would be to downgrade to Angular 16.1.9

[work933k]

I just updated our NX-workspace v16.3.2 to v16.7.2. And upgraded Angular v16,0.6 to v16.2.1. And am also seeing this issue with the test-runner. @yngvebn Thank you for your workaround.

[chriswoodie]

Seeing the same when using the storybook-addon-angular-router addon which also adds RouterTestingModule. It would be great if it could be fixed without requiring a workaround.

[prewk]

I redid migrations one by one, and this time I ended up on Angular 16.2.2, and suddenly I can't reproduce the error? Anyone can confirm?

[chriswoodie]

@prewk There was a fix for this included in 16.2.2 I believe, see https://github.com/angular/angular/issues/51382.