UnhandledPromiseRejectionWarning：TypeError：使用 Jest + Angular 将循环结构转换为 JSON答案

【问题标题】：UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON with Jest + AngularUnhandledPromiseRejectionWarning：TypeError：使用 Jest + Angular 将循环结构转换为 JSON
【发布时间】：2021-01-01 20:20:01
【问题描述】：

使用 jest-preset-angular 执行单元测试，但收到警告 UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON 不确定导致错误的原因，因此应用程序被卡住并且没有运行其他单元测试。

PASS  src/app/pages/result/result-filter/result-filter.component.spec.ts (6.251 s)
 PASS  src/app/pages/result/search-navigation/search-navigation.component.spec.ts
 PASS  src/app/pages/result/filter-modal/filter-modal.component.spec.ts (5.699 s)
 PASS  src/app/app.component.spec.ts
 PASS  src/app/pages/test-type/test-type.component.spec.ts (12.857 s)
(node:3280) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'element' -> object with constructor 'Object'
    |     property 'componentProvider' -> object with constructor 'Object'
    --- property 'parent' closes the circle
    at stringify (<anonymous>)
    at writeChannelMessage (internal/child_process/serialization.js:117:20)
    at process.target._send (internal/child_process.js:808:17)
    at process.target.send (internal/child_process.js:706:19)
    at reportSuccess (/Users/macbook/Projects/Playtime Projects/IDP/Idp.Bx.Ui/idp/node_modules/jest-worker/build/workers/processChild.js:67:11)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3280) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3280) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:3281) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'element' -> object with constructor 'Object'
    |     property 'componentProvider' -> object with constructor 'Object'
    --- property 'parent' closes the circle
    at stringify (<anonymous>)
    at writeChannelMessage (internal/child_process/serialization.js:117:20)
    at process.target._send (internal/child_process.js:808:17)
    at process.target.send (internal/child_process.js:706:19)
    at reportSuccess (/Users/macbook/Projects/Playtime Projects/IDP/Idp.Bx.Ui/idp/node_modules/jest-worker/build/workers/processChild.js:67:11)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3281) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3281) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:3279) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'element' -> object with constructor 'Object'
    |     property 'componentProvider' -> object with constructor 'Object'
    --- property 'parent' closes the circle
    at stringify (<anonymous>)
    at writeChannelMessage (internal/child_process/serialization.js:117:20)
    at process.target._send (internal/child_process.js:808:17)
    at process.target.send (internal/child_process.js:706:19)
    at reportSuccess (/Users/macbook/Projects/Playtime Projects/IDP/Idp.Bx.Ui/idp/node_modules/jest-worker/build/workers/processChild.js:67:11)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3279) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3279) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

 RUNS  src/app/pages/location/location.component.spec.ts
 RUNS  src/app/pages/signup/signup.component.spec.ts
 RUNS  src/app/pages/login/login.component.spec.ts

Test Suites: 10 passed, 10 of 20 total
Tests:       16 passed, 16 total
Snapshots:   1 obsolete, 5 passed, 5 total
Time:        2180 s

我不确定如何运行节点 --trace-warnings。看起来这是一个序列化问题，即使它只是一个警告但不确定问题出在哪里。有没有更好的方法来查找异常

【问题讨论】：

我有一个类似的问题，我相信这与我在 ngOnInit 中做一些异步工作有关。
在我的例子中，它是 ngOnInit 函数中的一个 observable（比如 this.observeMe$），它在 html 文件中等待（比如 {{ observeMe | async }}），我将其更改为 this.observeMe。 subscribe(...) 来解决这个问题。
stackoverflow.com/questions/11616630/… 展示了如何将 JSON 用于循环，因此它至少应该可以解决您的错误

标签： javascript node.js angular typescript jestjs

【解决方案1】：

用--detectOpenHandles 开玩笑。这将向您展示您的测试规范实际上有什么问题。对我来说，缺少 Angular Material 导入和服务模拟。正如 Nambi 在他的回答中提到的那样，系统可能会提示您添加 BrowserAnimationsModule

package.json:

"test": "jest --detectOpenHandles"

【讨论】：

【解决方案2】：

如果有错误，通常会出现此消息，但不会解析为标准异常。

正如@JamesBarret 所提到的，使用 jests detect open handle 功能将为您提供一个很好的错误消息，告诉您该消息背后的真正问题是什么。

另一条消息中提到的句柄 --detectOpenHandles 已被弃用，并已替换为--detect-open-handles。

您可以使用：（在您的 cli 上）

jest --detect-open-handles

或者在 package.json 文件中：

"test": "jest --detect-open-handles"

或者在我的例子中是一个角度测试：

ng test --detect-open-handles

【讨论】：

【解决方案3】：

添加我的答案以帮助错过的人。就我而言，我错过了导入

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

只有在单独运行一个测试用例时才能发现问题。

【讨论】：

【解决方案4】：

问题出在异步操作上，所以用下面的代码编写测试用例，帮我解决问题

describe('DateSelectionComponent', () => {
  let component: DateSelectionComponent;
  let fixture: ComponentFixture<DateSelectionComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DateSelectionComponent, SafePipe],
      imports: [
        SharedModule,
        NgReduxTestingModule,
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        {
          provide: PageAPIActions, useValue: { setPageState() { } }
        }
      ]
    }).compileComponents();
    fixture = TestBed.createComponent(DateSelectionComponent);
    component = fixture.componentInstance;

    // Don't use Object.defineProperty when assigning value to class properties
    component.page$ = of('value');
    component.page = { destination: 'value' };
    component.startDate = new NgbDate(2019, 2, 27);
    component.minDate = new NgbDate(2019, 2, 27);
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('Should Match Snapshot', () => {
     expect(fixture.debugElement.nativeElement).toMatchSnapshot()
  });
});

【讨论】：

【解决方案5】：

在我的情况下，由于未将 HttpClientModule 导入测试文件而触发了神秘错误。更多详情here.

【讨论】：

【解决方案6】：

我在用--watch 开玩笑时遇到了同样的问题。删除 --watch 停止了错误。

【讨论】：

【解决方案7】：

看起来错误是由于执行了一些异步操作。尝试将单元测试包装在 waitForAsync 函数中。

【讨论】：