"Stackblitz：如何使用 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

Answer 1

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:

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

2. Add tests /src/app/app.component.spec.ts eg:

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

3. Run the tests

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

Answer 2

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

"