如何在stackblitz中设置带有角度的笑话

Question

是否可以设置stackblitz项目来使用 jest 运行角度单元测试？

更新：

让它与 codeandbox 一起工作（它已经在 jest 上运行）但还不能让它与 stackblitz 一起运行，考虑到它们的工作方式不同。

提前致谢！

Answer 1

我以前这样做过，但对于 Jasmine 而不是 Jest。您可能希望遵循并以此为基础：

• 分步指南：https : //lukasznojek.com/blog/2019/05/add-jasmine-unit-testing-support-to-angular-in-stackblitz/
• 示例应用程序：https : //stackblitz.com/edit/jasmine-in-angular

简要描述;简介

添加依赖项：jasmine-core和@types/jasmine.

添加/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文件（放在一边main.ts）并粘贴以下内容：

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

因为它是在列出的文件将被运行的东西到测试中的评论main-testing.ts。如果您想测试其他文件，请相应地更改链接。

最后，要运行测试，请编辑angular.json和更改行

            "main": "src/main.ts",

到

            "main": "src/main-testing.ts",

要再次运行该应用程序，请将其改回。