Question

我一直在使用教程https://angular.io/docs/ts/latest/guide/testing.html使用英雄之旅教程实现使用Angular 2的Jasmine。

当我使用＆＃34; hero.spec＆＃34;进行测试时，一切正常。但是，当我尝试测试＆＃34; app.component.ts＆＃34;使用单元测试文件我命名为＃34; app.spec＆＃34;系统JS不附加＆＃34; js＆＃34;它。我收到以下错误：

angular2-polyfills.js:126 GET http://127.0.0.1:8080/src/test/app.component 404 (Not Found)`

system.src.js:1068 GET http://127.0.0.1:8080/angular2/core 404 (Not Found)

app.spec.ts文件如下：

import { AppComponent } from 'app.component';

describe('AppComponent', () => {

let app : AppComponent;

beforeEach(() => {
    app = new AppComponent();
});

it('true to be true', () => {
    expect(true).toEqual(true);
});

});

单元测试文件如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Ng App Unit Tests</title>
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
    // #2. Configure systemjs to use the .js extension
    //     for imports from the app folder
    System.config({
        packages: {
            'app': {defaultExtension: 'js'}
        }
    });

     // #3. Import the spec files explicitly
    Promise.all([
            System.import('app/app.spec'),
            System.import('app/app.component')
        ])

            // #4. wait for all imports to load ...
            //     then re-execute `window.onload` which
            //     triggers the Jasmine test-runner start
            //     or explain what went wrong.
            .then(window.onload)
            .catch(console.error.bind(console));
</script>
</body>
</html>

看起来它的System JS附加了＆＃34; js＆＃34;到＆＃34; app.spec＆＃34;但不是＆＃34; app.component＆＃34;或其他人。有人能指出我正确的方向吗？

由于

Answer 1

尝试：import { AppComponent } from './app.component' 或者，如果app.component位于app文件夹下： './app/app.component'。 spec文件与组件位于同一文件夹中吗？

Answer 2

我认为您忘记将一些JS文件导入HTML文件，因为我发现angular2/core模块有404错误。此外，我不认为您需要导入要测试的模块（app.component），因为它将在您的测试模块中导入。

此外，我发现您测试文件不在app文件夹下，因为SystemJS尝试通过此URL加载它：http://127.0.0.1:8080/src/test/app.component。您只需配置app文件夹。这就是为什么该工具没有附加js扩展名的原因。

以下是我在HTML文件中使用的内容：

<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.2/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/testing.dev.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>

<script>
  System.config({
    packages: {
      app: {
        defaultExtension: 'js'
      }
    } 
  });
  System.import('angular2/src/platform/browser/browser_adapter')
    .then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); })
    .then(function() {
      System.import('app/foo.bar.spec')
        .then(null, console.error.bind(console))
        .then(window.onload);
    })
</script>

请参阅此plunkr：https://plnkr.co/edit/YAVD4s?p=preview。

Angular 2和Jasmine

2 个答案: