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

Question

• macOS Mojave 10.14.5
• Node.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 测试中使用 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 测试中使用核心 Node 模块。 Karma 测试在浏览器中运行(即使 karma 服务器在 Node 上运行)。因此，测试无法访问 Node 核心模块。

在 karma 脚本中包含 Node 模块的唯一方法是使用类似 browserify 的内容。或webpack .

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

您可以使用 configuration file 中的 basePath 选项指定 karma 服务器在何处查找资源。 .