Stackblitz：如何使用 Angular 执行测试？答案

【问题标题】：Stackblitz : how can i execute a test using Angular?Stackblitz：如何使用 Angular 执行测试？
【发布时间】：2022-01-28 05:41:30
【问题描述】：

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

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

谢谢安德烈亚

【问题讨论】：

你的意思是像this这样的东西吗？如果是这样，请随意分叉并添加您自己的数据。
@dmcgrandle，问题不在于如何创建测试，而在于如何让这些测试在 Stackblitz 中运行。
你如何在运行测试和你的应用之间切换？

标签： angular stackblitz

【解决方案1】：

一种方法是使用Jasmine（这是一个行为驱动的开发框架）在 Stackblitz 中运行 Angular 测试。

Stackblitz Demo

简述为step by step guide

主要步骤：

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

添加测试/src/app/app.component.spec.ts 例如：

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

运行测试

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

【讨论】：

/Users/echelon-royer/Downloads/unit-testing-angular-apps/src/global-jasmine.ts (1,28) 中的错误：找不到模块 'jasmine-core/lib/茉莉花核心/jasmine.js'。 “Window”类型不存在“jasmineRequire”属性。类型“Env”上不存在属性“配置”。 “Window”类型上不存在属性“jasmineRef”。提供的参数与调用目标的任何签名都不匹配。 “Window”类型上不存在属性“jasmineRef”。 'reference' 指令语法无效。
只分叉您的工作解决方案并使用具有基础的解决方案会更容易

【解决方案2】：

最新版本的 Jasmine 不适用于 Stackblitz。如果您在要求安装 jasmine-core 时遇到错误，即使已安装，请尝试降级到版本 3.5.0。这对我有用，你可以通过在左下角添加依赖来做到这一点：jasmine@3.5.0

【讨论】：