Stackblitz : how can i execute a test using Angular?

Question

How can I execute a test scripts with Stackblitz using an Angular project? I see into the package.json a karma packages, so I am wondering if there is the possibily to test my components

https://stackblitz.com/edit/redux-in-actions?file=package.json

thanks Andrea

Do you mean something like [this](https://stackblitz.com/edit/stackoverflow-q-53122846?file=app%2Femployee.component.spec.ts)? If so feel free to fork it and add your own data. — dmcgrandle, Nov 22 '18 at 18:22
@dmcgrandle, the question is not how to create tests, its about how you make those tests run in Stackblitz. — Enrique Altuna, Mar 29 '19 at 02:44
How do you switch between running tests and your app though? — MagicLuckyCat, Oct 09 '19 at 10:25

score 4 · Answer 1 · answered Jul 27 '20 at 09:03

One approach is using Jasmine (which is a behavior-driven development framework) to run Angular tests in Stackblitz.

Stackblitz Demo

Brief description as step by step guide

Main steps:

Install Jasmine

add Jasmine as dependency to stackblitz

add file /src/global-jasmine.ts

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

Edit /src/styles.scss

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

Add /src/main-testing.ts file


 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()
   );
 }

Add tests /src/app/app.component.spec.ts e.g.:

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

Run the tests

Use "main": "src/main-testing.ts", instead of "main": "src/main.ts", in file angular.json

ERROR in /Users/echelon-royer/Downloads/unit-testing-angular-apps/src/global-jasmine.ts (1,28): Cannot find module 'jasmine-core/lib/jasmine-core/jasmine.js'. Property 'jasmineRequire' does not exist on type 'Window'. Property 'configure' does not exist on type 'Env'. Property 'jasmineRef' does not exist on type 'Window'. Supplied parameters do not match any signature of call target. Property 'jasmineRef' does not exist on type 'Window'. Invalid 'reference' directive syntax. — Royer Adames, May 05 '22 at 22:57
It would be easier to just fork your working solution and work with that has a base — Royer Adames, May 05 '22 at 22:57

score 0 · Answer 2 · answered Jan 27 '22 at 21:41

The latest version of Jasmine does not work on Stackblitz. If you are getting an error asking to install jasmine-core, even when installed, try downgrade to version 3.5.0. This worked for me, you can do this by adding the dependency on the bottom left: jasmine@3.5.0

Stackblitz : how can i execute a test using Angular?

2 Answers2