我在Aurelia测试中加载视图时遇到问题。请参考下面的示例测试代码..
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
describe('MyComponent', () => {
let component;
beforeEach(() => {
component = StageComponent
.withResources('src/common/my-component')
.inView('<my-component first-name.bind="firstName"></my-component>')
.boundTo({ firstName: 'Bob' });
});
it('should render first name', done => {
component.create(bootstrap).then(() => {
const nameElement = document.querySelector('.firstName');
expect(nameElement.innerHTML).toBe('Bob');
done();
}).catch(e => { console.log(e.toString()) });
});
afterEach(() => {
component.dispose();
});
});
我正在使用业力来运行带有代理的测试 -
proxies: {
'/base/jspm_packages/': '/base/wwwroot/jspm_packages/'
}
运行以上测试后,我可以加载视图模型但是无法加载视图并出现以下错误 -
日志:'错误:(SystemJS)XHR错误(404 Not Found)loading http://localhost:9876/base/src/common/my-component.html 错误:XHR错误(404 Not Found)loading http://localhost:9876/base/src/common/my-component.html 加载http://localhost:9876/base/src/common/my-component.html!http://localhost:9876/base/jspm_packages/github/systemjs/plugin-text@0.0.8.js时出错 加载http://localhost:9876/base/src/common/my-component.html!template-registry-entry'
时出错
提前感谢您的帮助!
更新 - &gt; Karma.conf.js文件
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jspm', 'jasmine'],
jspm: {
// Edit this to your needs
loadFiles: ['test/unit/setup.js', 'test/unit/**/*.js'],
serveFiles: ['src/**/*.js'],
paths: {
'*': 'src/*',
'test/*': 'test/*',
'github:*': 'jspm_packages/github/*',
'npm:*': 'jspm_packages/npm/*'
}
},
// list of files / patterns to load in the browser
files: [],
proxies: {
'/base/jspm_packages/': '/base/wwwroot/jspm_packages/'
},
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/**/*.js': ['babel'],
'src/**/*.js': ['babel', 'coverage']
},
'babelPreprocessor': {
options: {
sourceMap: 'inline',
presets: ['es2015-loose', 'stage-1'],
plugins: [
'syntax-flow',
'transform-decorators-legacy',
'transform-flow-strip-types'
]
}
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
})
}
答案 0 :(得分:3)
可能是这一行:
serveFiles: ['src/**/*.js'],
实际应该是这样的:
serveFiles: ['src/**/*.js', 'src/**/*.html']
通常你的html会与你的组件的js捆绑在一起,但在这种情况下你直接提供html。