导入 Node 核心模块会破坏 Karma 测试(使用 @open-wc/testing-karma)
Importing Node core modules breaks Karma tests (using @open-wc/testing-karma)
- macOS 莫哈韦沙漠 10.14.5
- Node.js v12.6.0
我正在尝试为 vanilla web 组件设置测试,这让我找到了 @open-wc/testing-karma
包。当做这样的事情时:
src/redblue-video.test.js
import { html, fixture, expect } from '@open-wc/testing';
import RedBlueVideo from './parser-omni.js'; // ES6 web component class
customElements.define( 'redblue-video', RedBlueVideo );
describe( '<redblue-video />', () => {
it( 'embeds YouTube videos', async () => {
const el = await fixture( html`<redblue-video></redblue-video>` );
expect( el ).dom.to.equal( `<redblue-video class="redblue-video" role="application"></redblue-video>` );
} );
} );
…和运行将它与yarn test
(karma start
)结合起来,测试执行得很好:
$ yarn test
yarn run v1.17.3
$ karma start
START:
01 08 2019 19:11:03.202:WARN [filelist]: Pattern "/Users/Hugh/Sites/redblue/__snapshots__/**/*.md" does not match any file.
01 08 2019 19:11:03.223:INFO [karma-server]: Karma v4.2.0 server started at http://0.0.0.0:9876/
01 08 2019 19:11:03.223:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox, ChromeHeadlessNoSandbox with concurrency unlimited
01 08 2019 19:11:03.226:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:11:03.240:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:11:03.893:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket 4QcOBy0C1_X43S5zAAAA with id 15906039
01 08 2019 19:11:03.922:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket bcOgxLUp8s7CAZUqAAAB with id 41870378
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No Embed URL found'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No Embed URL found'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No nonlinear playlists found'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No nonlinear playlists found'
<redblue-video />
✔ embeds YouTube videos
Finished in 0.025 secs / 0.038 secs @ 19:11:07 GMT-0400 (Eastern Daylight Time)
SUMMARY:
✔ 2 tests completed
✨ Done in 5.07s.
但如果我尝试拉入 readFileSync
,如:
import { html, fixture, expect } from '@open-wc/testing';
import { readFileSync } from 'fs';
import RedBlueVideo from './parser-omni.js'; // ES6 web component class
customElements.define( 'redblue-video', RedBlueVideo );
describe( '<redblue-video />', () => {
it( 'embeds YouTube videos', async () => {
const markup = readFileSync( './examples/youtube-embed.hvml' );
const el = await fixture( html`<redblue-video>${markup}</redblue-video>` );
expect( el ).dom.to.equal( `<redblue-video class="redblue-video" role="application">${markup}</redblue-video>` );
} );
} );
…那么测试不运行:
$ yarn test
yarn run v1.17.3
$ karma start
START:
01 08 2019 19:16:08.364:WARN [filelist]: Pattern "/Users/Hugh/Sites/redblue/__snapshots__/**/*.md" does not match any file.
01 08 2019 19:16:08.384:INFO [karma-server]: Karma v4.2.0 server started at http://0.0.0.0:9876/
01 08 2019 19:16:08.385:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox, ChromeHeadlessNoSandbox with concurrency unlimited
01 08 2019 19:16:08.390:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:16:08.397:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:16:09.100:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket a8fHrCGFmHdZC5qOAAAA with id 88214959
01 08 2019 19:16:09.799:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket Cq0xMj1wOchVYG13AAAB with id 63311008
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) ERROR: 'failed to load element http://localhost:9876/base/src/redblue-video.test.js?2133f326ffd8a86c0252453f23aee7a13f7ff7ad'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) ERROR: 'failed to load element http://localhost:9876/base/src/redblue-video.test.js?2133f326ffd8a86c0252453f23aee7a13f7ff7ad'
Finished in 0.008 secs / 0 secs @ 19:16:11 GMT-0400 (Eastern Daylight Time)
SUMMARY:
✔ 0 tests completed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
是否无法将 Node 核心模块用于 Karma 测试?还是我缺少一些额外的配置?
karma.conf.js – 这仅与 open-wc 的 recommended config 不同,通过 test/**/*.test.js
更改为 src/**/*.test.js
。
const { createDefaultConfig } = require('@open-wc/testing-karma');
const merge = require('deepmerge');
module.exports = config => {
config.set(
merge(createDefaultConfig(config), {
files: [
// runs all files ending with .test in the test folder,
// can be overwritten by passing a --grep flag. examples:
//
// npm run test -- --grep test/foo/bar.test.js
// npm run test -- --grep test/bar/*
{ pattern: config.grep ? config.grep : 'src/**/*.test.js', type: 'module' }
],
// see the karma-esm docs for all options
esm: {
// if you are using 'bare module imports' you will need this option
nodeResolve: true
}
})
);
return config;
};
package.json:
"scripts": {
"test": "karma start",
"test:coverage": "karma start --coverage",
"test:watch": "karma start --auto-watch=true --single-run=false",
"test:update-snapshots": "karma start --update-snapshots",
"test:prune-snapshots": "karma start --prune-snapshots",
"test:compatibility": "karma start --compatibility all --auto-watch=true --single-run=false"
},
"devDependencies": {
"@open-wc/chai-dom-equals": "^0.12.36",
"@open-wc/testing": "^2.2.2",
"@open-wc/testing-karma": "^3.1.6",
"codecov": "^3.5.0",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^13.2.0",
"eslint-config-hughx": "^0.0.2",
"eslint-plugin-import": "^2.18.2",
"lit-html": "^1.1.1",
"webpack": "^4.38.0"
}
你不能在业力测试中使用核心节点模块,除非你做了一些棘手的事情。业力测试 运行 在浏览器中(即使业力服务器 运行s 在节点上)。因此,测试无法访问节点核心模块。
在你的 karma 脚本中包含节点模块的唯一方法是使用类似 browserify or webpack.
的东西
但是,更重要的是,由于测试是在浏览器中进行的 运行,您无法直接访问文件系统。您尝试读取磁盘上的文件的方法将行不通。您将需要能够使用 fetch
请求或类似的东西从您的 karma 服务器提供文件。
您可以使用 configuration file 中的 basePath
选项指定 karma 服务器查找资源的位置。
- macOS 莫哈韦沙漠 10.14.5
- Node.js v12.6.0
我正在尝试为 vanilla web 组件设置测试,这让我找到了 @open-wc/testing-karma
包。当做这样的事情时:
src/redblue-video.test.js
import { html, fixture, expect } from '@open-wc/testing';
import RedBlueVideo from './parser-omni.js'; // ES6 web component class
customElements.define( 'redblue-video', RedBlueVideo );
describe( '<redblue-video />', () => {
it( 'embeds YouTube videos', async () => {
const el = await fixture( html`<redblue-video></redblue-video>` );
expect( el ).dom.to.equal( `<redblue-video class="redblue-video" role="application"></redblue-video>` );
} );
} );
…和运行将它与yarn test
(karma start
)结合起来,测试执行得很好:
$ yarn test
yarn run v1.17.3
$ karma start
START:
01 08 2019 19:11:03.202:WARN [filelist]: Pattern "/Users/Hugh/Sites/redblue/__snapshots__/**/*.md" does not match any file.
01 08 2019 19:11:03.223:INFO [karma-server]: Karma v4.2.0 server started at http://0.0.0.0:9876/
01 08 2019 19:11:03.223:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox, ChromeHeadlessNoSandbox with concurrency unlimited
01 08 2019 19:11:03.226:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:11:03.240:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:11:03.893:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket 4QcOBy0C1_X43S5zAAAA with id 15906039
01 08 2019 19:11:03.922:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket bcOgxLUp8s7CAZUqAAAB with id 41870378
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No Embed URL found'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No Embed URL found'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No nonlinear playlists found'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) WARN: 'No nonlinear playlists found'
<redblue-video />
✔ embeds YouTube videos
Finished in 0.025 secs / 0.038 secs @ 19:11:07 GMT-0400 (Eastern Daylight Time)
SUMMARY:
✔ 2 tests completed
✨ Done in 5.07s.
但如果我尝试拉入 readFileSync
,如:
import { html, fixture, expect } from '@open-wc/testing';
import { readFileSync } from 'fs';
import RedBlueVideo from './parser-omni.js'; // ES6 web component class
customElements.define( 'redblue-video', RedBlueVideo );
describe( '<redblue-video />', () => {
it( 'embeds YouTube videos', async () => {
const markup = readFileSync( './examples/youtube-embed.hvml' );
const el = await fixture( html`<redblue-video>${markup}</redblue-video>` );
expect( el ).dom.to.equal( `<redblue-video class="redblue-video" role="application">${markup}</redblue-video>` );
} );
} );
…那么测试不运行:
$ yarn test
yarn run v1.17.3
$ karma start
START:
01 08 2019 19:16:08.364:WARN [filelist]: Pattern "/Users/Hugh/Sites/redblue/__snapshots__/**/*.md" does not match any file.
01 08 2019 19:16:08.384:INFO [karma-server]: Karma v4.2.0 server started at http://0.0.0.0:9876/
01 08 2019 19:16:08.385:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox, ChromeHeadlessNoSandbox with concurrency unlimited
01 08 2019 19:16:08.390:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:16:08.397:INFO [launcher]: Starting browser ChromeHeadless
01 08 2019 19:16:09.100:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket a8fHrCGFmHdZC5qOAAAA with id 88214959
01 08 2019 19:16:09.799:INFO [HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket Cq0xMj1wOchVYG13AAAB with id 63311008
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) ERROR: 'failed to load element http://localhost:9876/base/src/redblue-video.test.js?2133f326ffd8a86c0252453f23aee7a13f7ff7ad'
HeadlessChrome 75.0.3770 (Mac OS X 10.14.5) ERROR: 'failed to load element http://localhost:9876/base/src/redblue-video.test.js?2133f326ffd8a86c0252453f23aee7a13f7ff7ad'
Finished in 0.008 secs / 0 secs @ 19:16:11 GMT-0400 (Eastern Daylight Time)
SUMMARY:
✔ 0 tests completed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
是否无法将 Node 核心模块用于 Karma 测试?还是我缺少一些额外的配置?
karma.conf.js – 这仅与 open-wc 的 recommended config 不同,通过 test/**/*.test.js
更改为 src/**/*.test.js
。
const { createDefaultConfig } = require('@open-wc/testing-karma');
const merge = require('deepmerge');
module.exports = config => {
config.set(
merge(createDefaultConfig(config), {
files: [
// runs all files ending with .test in the test folder,
// can be overwritten by passing a --grep flag. examples:
//
// npm run test -- --grep test/foo/bar.test.js
// npm run test -- --grep test/bar/*
{ pattern: config.grep ? config.grep : 'src/**/*.test.js', type: 'module' }
],
// see the karma-esm docs for all options
esm: {
// if you are using 'bare module imports' you will need this option
nodeResolve: true
}
})
);
return config;
};
package.json:
"scripts": {
"test": "karma start",
"test:coverage": "karma start --coverage",
"test:watch": "karma start --auto-watch=true --single-run=false",
"test:update-snapshots": "karma start --update-snapshots",
"test:prune-snapshots": "karma start --prune-snapshots",
"test:compatibility": "karma start --compatibility all --auto-watch=true --single-run=false"
},
"devDependencies": {
"@open-wc/chai-dom-equals": "^0.12.36",
"@open-wc/testing": "^2.2.2",
"@open-wc/testing-karma": "^3.1.6",
"codecov": "^3.5.0",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^13.2.0",
"eslint-config-hughx": "^0.0.2",
"eslint-plugin-import": "^2.18.2",
"lit-html": "^1.1.1",
"webpack": "^4.38.0"
}
你不能在业力测试中使用核心节点模块,除非你做了一些棘手的事情。业力测试 运行 在浏览器中(即使业力服务器 运行s 在节点上)。因此,测试无法访问节点核心模块。
在你的 karma 脚本中包含节点模块的唯一方法是使用类似 browserify or webpack.
的东西但是,更重要的是,由于测试是在浏览器中进行的 运行,您无法直接访问文件系统。您尝试读取磁盘上的文件的方法将行不通。您将需要能够使用 fetch
请求或类似的东西从您的 karma 服务器提供文件。
您可以使用 configuration file 中的 basePath
选项指定 karma 服务器查找资源的位置。