Jest + 角度测试库：Mock TranslateService

Question

我正在尝试使用 angular-testing-library 测试一个组件，但我不知道如何从@ngx-translate模拟 TranslateService

我的精简组件：

import { Component } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'

@Component({
  selector: 'app-my',
  template: '<p data-testid="hello" translate="global.hello"></p>',
})
export class MyComponent {
  constructor(
    public translate: TranslateService
  ) {}
}

我的测试：

import { TranslateService } from '@ngx-translate/core'
import { render, screen, fireEvent } from '@testing-library/angular'
import { MyComponent } from './my.component'

class TranslateServiceMock {}


describe('MyComponent', () => {

  beforeEach(async () => {
    await render(MyComponent, {
      componentProviders: [
        { provide: TranslateService, useClass: TranslateServiceMock },
      ],
    })
  })

  it('renders', async () => {
    expect(screen.getByTestId('hello')).toBeTruthy()
  })
})

收到此错误：

(node:38520) 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:805:17)
    at process.target.send (internal/child_process.js:703:19)
    at reportSuccess (/Users/alondahari/loan-gurus/customer-portal/node_modules/jest-runner/node_modules/jest-worker/build/workers/processChild.js:67:11)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:38520) 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:38520) [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.

并且测试挂起。

更新

我的jest.config.js ：

var utils = require('ts-jest/utils')
var tsConfig = require('./tsconfig')

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
  collectCoverage: true,
  coverageReporters: ['html'],
  coverageDirectory: 'coverage/my-app',
  moduleNameMapper: utils.pathsToModuleNameMapper(
    tsConfig.compilerOptions.paths || {},
    {
      prefix: '<rootDir>/',
    }
  ),
}

package.json 笑话条目：

  "jest": {
    "preset": "jest-preset-angular"
  }

Answer 1

已解决，使用ngx-translate-testing库。 像这样：

import { TranslateService } from '@ngx-translate/core'
import { render, screen, fireEvent } from '@testing-library/angular'
import { MyComponent } from './my.component'

class TranslateServiceMock {}

const translations = {
  en: {
    global: {
      submit: 'Submit'
    }
  }
}

describe('MyComponent', () => {

  beforeEach(async () => {
    await render(MyComponent, {
      componentProviders: [
        { provide: TranslateService, useClass: TranslateServiceMock },
      ],
      imports: [TranslateTestingModule.withTranslations(translations)],
    })
  })

  it('renders', async () => {
    expect(screen.getByTestId('hello')).toBeTruthy()
  })
})

Answer 2

这是 Angular 中使用 JEST 进行单元测试的完整教程。 希望本教程涵盖 JEST Angular 单元测试中的大部分主题AZ JEST Angular 单元测试教程