我有一个非常简单的Web组件,我想对其进行测试。我收到此问题主题中提到的错误。我发现了一个类似的问题Jasmine Karma Error "An error was thrown in afterAll\nUncaught ReferenceError: container is not defined thrown",并且我已经检查出karma.conf.js中的路径和文件名是否存在错误。
还有什么可能导致提到的错误?
我的香草网络组件:
const templateString = `
<div id="mydiv">
</div>
`;
const template = document.createElement('template');
template.innerHTML = templateString;
export class SimplestWithoutBackend extends HTMLElement{
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define("simplest-without-backend", SimplestWithoutBackend);
测试:
import { SimplestWithoutBackend } from './public/simplest-without-backend.js';
describe('simplest test', () => {
let element, shadowRoot;
beforeEach(() => {
element = document.createElement('simplest-without-backend');
shadowRoot = element.shadowRoot;
document.body.append(element);
});
// check that the exposed API works
describe('init', () => {
it('should add a div under the shadow root', () => {
expect(shadowRoot.querySelector('mydiv')).toBeTruthy();
});
});
});
package.json
{
"name": "simplest-webcomponent",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"express": "^4.17.1",
"jasmine": "^3.4.0",
"mocha": "^6.1.4",
"wct-browser-legacy": "^1.0.2",
"web-component-tester": "^6.9.2"
},
"scripts": {
"test": "karma start config/karma.conf.js"
},
"devDependencies": {
"karma": "^4.1.0",
"karma-jasmine": "^2.0.1"
}
}
karma.conf.js
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'../test/simplest-without-backend-test.js'
],
// list of files / patterns to exclude
exclude: [],
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// 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,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
})
};
cmd控制台:
# npm test
> simplest-webcomponent@0.1.0 test C:\_d\WSs\simplest-webcomponent
> karma start config/karma.conf.js
10 07 2019 18:08:37.038:WARN [karma]: No captured browser, open http://localhost:9876/
10 07 2019 18:08:37.175:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
10 07 2019 18:08:37.176:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
10 07 2019 18:08:37.185:INFO [launcher]: Starting browser Chrome
10 07 2019 18:08:39.756:INFO [Chrome 75.0.3770 (Windows 10.0.0)]: Connected on socket yjbpTPMBygpgPJK7AAAA with id 33592258
Chrome 75.0.3770 (Windows 10.0.0) ERROR
An error was thrown in afterAll
SyntaxError: Unexpected token {
Chrome 75.0.3770 (Windows 10.0.0): Executed 0 of 0 ERROR (0.029 secs / 0 secs)