我一直在使用教程https://angular.io/docs/ts/latest/guide/testing.html使用英雄之旅教程实现使用Angular 2的Jasmine。
当我用“hero.spec”测试时，一切正常。但是，当我尝试使用单元测试文件测试“app.component.ts”时，我将其命名为“app.spec”.System JS不会向其附加“js”。我收到以下错误：
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将“js”附加到“app.spec”而不是“app.component”或其他。谁能指出我正确的方向？
谢谢
尝试：import { AppComponent } from './app.component'或者如果app.component在app文件夹下：'./app/app.component'。 spec文件与组件位于同一文件夹中吗？
我认为您忘记将一些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/[email protected]/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>
看到这个plunker：qazxsw poi。