Aurelia自定義元素測試無法加載視圖

Question

我在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未找到）加載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 '時出錯

感謝您提前幫助！

更新 - > 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 }) } 

Answer 1

可能是這一行：

  serveFiles: ['src/**/*.js'],

應該是這樣的：

  serveFiles: ['src/**/*.js', 'src/**/*.html']

通常你的html會與你的組件的js捆綁在一起，但在這種情況下你直接提供html。