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

Question

• macOS Mojave 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.

是否无法在 Karma 测试中使用 Node 核心模块？还是我缺少一些额外的配置？

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"
}

Answer 1

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

在 karma 脚本中包含节点模块的唯一方法是使用 browserify 或 webpack 之类的东西。

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

您可以使用configuration file 中的basePath 选项指定业力服务器查找资源的位置。