storybook [Bug]:导入RouterTestingModule的Story在beforeEach未定义时抛出错误,

bejyjqdl  于 3个月前  发布在  其他
关注(0)|答案(5)|浏览(49)

描述错误

如果你在运行带有Angular的Storybook时,有一个导入RouterTestingModule的故事,那么这个故事会抛出以下JavaScript错误:

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

重现问题

我已经上传了一个包含单个故事的小项目,以展示这个问题。
https://github.com/SuneRadich/beforeEachError

系统信息

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

额外的上下文信息

我在nx( nx.dev )单仓库中使用Storybook和Angular,所以这可能与那里有关。但似乎与Angular和Storybook的一些更改有关。

uinbv5nw

uinbv5nw1#

解决方法:
在您的 preview_head.html 文件中,在文件顶部添加以下脚本块:

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

这将有效地对暴露的测试内部的 beforeEach 和 afterEach 进行猴子补丁。
似乎这个 bug 是由 Angular 16.2.0 发布的 angular/angular@0b14e4e 提交引起的。
因此,另一个解决方法是降级到 Angular 16.1.9。

nnsrf1az

nnsrf1az2#

我刚刚将我们的NX-workspace v16.3.2更新到了v16.7.2。并将Angular v16.0.6升级到了v16.2.1。同时,我也在使用测试运行器时遇到了这个问题。
@yngvebn 谢谢你的解决方法。

1cosmwyk

1cosmwyk3#

在使用添加了RouterTestingModulestorybook-addon-angular-router插件时,也看到了相同的问题。如果能够在不要求使用替代方案的情况下修复它,那就太好了。

alen0pnh

alen0pnh4#

我逐个重做了迁移,这次我最终在Angular 16.2.2上,但突然间我无法重现错误?有人能确认吗?

9gm1akwq

9gm1akwq5#

在16.2.2版本中,有一个针对这个问题的修复,详见angular/angular#51382

相关问题