How to setup jest with angular in stackblitz

Question

Is it possible to setup stackblitz project to run angular unit-testing with jest?

Update:

Got it working with codesandbox(it's already running on jest) but have yet not been able to make it run with stackblitz, taken in consideration they work differently.

Thanks in advance!

Answer 1

I have done this before, but for Jasmine not Jest. You may want to follow and build it upon it:

• step by step guide: https://lukasznojek.com/blog/2019/05/add-jasmine-unit-testing-support-to-angular-in-stackblitz/
• sample application: https://stackblitz.com/edit/jasmine-in-angular

Brief description

Add dependencies: jasmine-core and @types/jasmine .

Add /src/global-jasmine.ts file:

import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
window.jasmineRequire = jasmineRequire;

Edit /src/styles.scss and add:

@import 'jasmine-core/lib/jasmine-core/jasmine.css';

Add /src/main-testing.ts file (aside main.ts ) and paste the following content:

import './global-jasmine'
import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
import 'jasmine-core/lib/jasmine-core/boot.js';

import './polyfills';

// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';

// Requires 'zone.js/dist/proxy.js' and 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// stuff to test
import './app/app.component.spec.ts'

jasmine.getEnv().configure({random: false});
bootstrap();

function bootstrap () {
  if (window.jasmineRef) {
    location.reload();
    return;
  } else {
    window.onload();
    window.jasmineRef = jasmine.getEnv();
  }

  // First, initialize the Angular testing environment.
  getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
  );
}

Create a sample unit test /src/app/app.component.spec.ts :

describe('Testing tests', () => {
  it('should succeed', () => expect(true).toEqual(true));
  it('should fail', () => expect(true).toEqual(false));
});

That file will be run because it was listed in stuff to test comment in main-testing.ts . If you want to test other file(s), change the links accordingly.

And finally, to run the tests, edit angular.json and change the line

            "main": "src/main.ts",

to

            "main": "src/main-testing.ts",

To run again the application, change it back.