Stacklitz:如何使用Angular执行测试

Question

如何使用Angular项目使用Stacklitz执行测试脚本？我在包.json中看到了一个因果报应包，所以我想知道是否有可能测试我的组件

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

谢谢Andrea

Answer 1

一种方法是使用Jasmine(一种行为驱动的开发框架(在Stacklitz中运行Angular测试。

Stacklitz演示

作为逐步引导的简要说明

主要步骤：

1. 安装Jasmine

• 添加Jasmine作为stackblitz的依赖项
• 添加文件/src/global-jasmine.ts

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

• 编辑/src/styles.scss

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

• 添加/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. 添加测试/src/app/app.component.spec.ts，例如：

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

3. 运行测试

   在文件angular.json中使用"main": "src/main-testing.ts",而不是"main": "src/main.ts",

Answer 2

Jasmine的最新版本不适用于Stacklitz。如果您收到一个错误，要求安装jasmine核心，即使在安装时，也可以尝试降级到3.5.0版本。这对我很有效，你可以通过在左下角添加依赖项来做到这一点：jasmine@3.5.0