Stackblitz :如何使用Angular执行测试？

Question

如何使用Angular项目通过Stackblitz执行测试脚本？我看到了package.json a karma包，所以我想知道是否有可能测试我的组件

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

谢谢安德里亚

Answer 1

一种方法是使用Jasmine (这是一种行为驱动的开发框架)在Stackblitz中运行角度测试。

Stackblitz Demo

简要描述为step by step guide

主要步骤：

从‘Jasmine

• add -
• /lib/ Jasmine - /src/global-jasmine.ts /jasmine.js’导入核心作为Jasmine
  • add文件的依赖项安装jasmine核心；window.jasmineRequire =jasmine.js

导入'jasmine-core/lib/jasmine-core/jasmine.css'; @

• 编辑/src/styles.scss

• 添加/src/main-testing.ts file导入‘./-jasmine’导入/src/main-testing.ts file导入‘jasmine-
  • /lib/jasmine-/src/main-testing.ts file/boot.js’；导入'./polyfills'；//该文件是karma.conf.js所必需的，并递归加载所有异步和框架文件导入‘zone.js/dist/ .spec -/src/main-testing.ts file’；导入'zone.js/dist/fake-async-test'；导入'zone.js/dist/long-stack-trace-zone'；导入'zone.js/dist/proxy.js'；导入'zone.js/dist/proxy.js‘；导入’zone.js/dist/proxy.js‘和’zone.js/dist/proxy.js‘和'zone.js/dist/sync-test'；导入'zone.js/dist/jasmine-patch'；从’@angular/core/testing‘导入{ getTestBed }；从’@angular/platform-browser-dynamic/testing‘导入{ BrowserDynamicTestingModule，platformBrowserDynamicTesting }；//测试导入的东西'./app/app.component.spec.ts‘jasmine.getEnv () .configure({ window.jasmineRef : false})；bootstrap()；function bootstrap (){ if (window.jasmineRef) { location.reload()；return；} else { window.onload()；window.jasmineRef= jasmine.getEnv()；} //首先初始化角度测试环境。getTestBed().initTestEnvironment( BrowserDynamicTestingModule，platformBrowserDynamicTesting() )；}

1. Add tests /src/app/app.component.spec.ts，例如：

describe(‘测试测试’，() => {it(‘应该成功’，() => expect(true).toEqual(true))；it(‘应该失败’，() => expect(true).toEqual(false))；});

1. 运行测试

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

Answer 2

最新版本的Jasmine不能在Stackblitz上运行。如果您在安装jasmine-core时遇到错误，即使已安装，也可以尝试降级到版本3.5.0。这对我很有效，您可以通过在左下角添加依赖项来完成此操作: jasmine@3.5.0