导入 Node 核心模块会破坏 Karma 测试(使用 @open-wc/testing-karma)

Question

• macOS Mojave 10.14.5
• 节点.js v12.6.0

我正在尝试为香草 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.

难道不能将节点核心模块与业力测试一起使用吗？还是我缺少一些额外的配置？

karma.conf.js– 这与 open-wc 推荐的配置不同，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"
}

Answer 1

除非你做了一些棘手的事情，否则你不能在业力测试中使用核心节点模块。业力测试在浏览器中运行(即使业力服务器在节点上运行)。因此，测试无法访问节点核心模块。

在你的业力脚本中包含节点模块的唯一方法是使用像browserify或webpack这样的东西。

但是，更重要的是，由于测试在浏览器中运行，因此您无法直接访问文件系统。您尝试读取磁盘上文件的方法将不起作用。您需要能够使用fetch请求或类似的东西从您的 karma 服务器提供文件。

您可以使用配置文件中的basePath选项指定 karma 服务器查找资源的位置。