title: Jest + angular-testing-library: Mock TranslateService
body: <p>I'm trying to test a component using angular-testing-library and I can't figure out how to mock TranslateService from <code>@ngx-translate</code></p>
  <p>My stripped down component:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core'
  import { TranslateService } from '@ngx-translate/core'
  
  @Component({
    selector: 'app-my',
    template: '&lt;p data-testid=&quot;hello&quot; translate=&quot;global.hello&quot;&gt;&lt;/p&gt;',
  })
  export class MyComponent {
    constructor(
      public translate: TranslateService
    ) {}
  }
  </code></pre>
  <p>my test:</p>
  <pre class="lang-js prettyprint-override"><code>import { TranslateService } from '@ngx-translate/core'
  import { render, screen, fireEvent } from '@testing-library/angular'
  import { MyComponent } from './my.component'
  
  class TranslateServiceMock {}
  
  
  describe('MyComponent', () =&gt; {
  
    beforeEach(async () =&gt; {
      await render(MyComponent, {
        componentProviders: [
          { provide: TranslateService, useClass: TranslateServiceMock },
        ],
      })
    })
  
    it('renders', async () =&gt; {
      expect(screen.getByTestId('hello')).toBeTruthy()
    })
  })
  </code></pre>
  <p>getting this error:</p>
  <pre class="lang-sh prettyprint-override"><code>(node:38520) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
      --&gt; starting at object with constructor 'Object'
      |     property 'element' -&gt; object with constructor 'Object'
      |     property 'componentProvider' -&gt; object with constructor 'Object'
      --- property 'parent' closes the circle
      at stringify (&lt;anonymous&gt;)
      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.
  </code></pre>
  <p>and the tests hang.</p>
  <p><strong>Update</strong></p>
  <p>My <code>jest.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>var utils = require('ts-jest/utils')
  var tsConfig = require('./tsconfig')
  
  module.exports = {
    preset: 'jest-preset-angular',
    roots: ['&lt;rootDir&gt;/src/'],
    testMatch: ['**/+(*.)+(spec).+(ts)'],
    setupFilesAfterEnv: ['&lt;rootDir&gt;/src/test.ts'],
    collectCoverage: true,
    coverageReporters: ['html'],
    coverageDirectory: 'coverage/my-app',
    moduleNameMapper: utils.pathsToModuleNameMapper(
      tsConfig.compilerOptions.paths || {},
      {
        prefix: '&lt;rootDir&gt;/',
      }
    ),
  }
  </code></pre>
  <p>package.json jest entry:</p>
  <pre class="lang-json prettyprint-override"><code>  &quot;jest&quot;: {
      &quot;preset&quot;: &quot;jest-preset-angular&quot;
    }
  </code></pre>