使用 jsdom 测试 Web 组件

如何解决使用 jsdom 测试 Web 组件

我已经构建了一个 Web 组件，它被捆绑（使用 Rollup）到一个 UMD 和 ESM 包中。 src/index.js 基本上是这样的。

import html from 'template.html';
import css from 'styles.css';

export class MyComponent extends window.HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}

export default (function() {
  window.customElements.define('my-component',MyComponent);
})()

我很清楚这看起来有多奇怪，我愿意接受有关清理它的建议，以便测试真正有效。

我正在尝试使用 mocha 和 jsdom-global 测试我的网络组件。问题是我无法安装组件。换句话说，这失败了：

import jsdomGlobal from 'jsdom-global';
import { expect } from 'chai';

import { MyComponent } from '../dist/my-component.esm';

describe('test',function() {
  let jsdom;

  before(function(){
    jsdom = jsdomGlobal('',{ runScripts: 'dangerously' });
    const script = document.createElement('script');
    script.textContent = `window.customElements.define('my-component',(${MyComponent}))`;
    document.head.appendChild(script);
  })

  after(function() {
    jsdom();
  });

  it('mounts',async function() {
    await window.customElements.whenDefined('my-component');
    expect(window.customElements.get('my-component')).to.exist;
  })
})

我也试过 not 包装在一个新的 window.customElements.define 调用中，因为我认为 IIFE 只会在引用文件后执行，但情况似乎并非如此？

顺便说一句，如果有人知道如何直接测试 /src 文件而不是 /dist，那就太好了。我认为 mocha 和 rollup 可以通过某种方式协同工作以更好地识别覆盖范围。就目前而言，覆盖范围仅显示一行失败，与源代码中的行没有任何关系。

解决方法

好的，在尝试了各种事情之后，我一些成功了。

import { JSDOM } from 'jsdom';
import { expect } from 'chai';
import fs from 'fs';
import { resolve } from 'path';
import { promisify } from 'util';

const readFile = promisify(fs.readFile);

async function getHTML() {
  const script = await readFile(resolve(__dirname,'..','dist','my-component.umd.js'));
  return `<html><head><script>${script}</script></head><body></body></html>`;
}

describe('my-component',function () {
  describe('browser context',function() {
    let window,document;

    before(async function() {
      const html = await getHTML();
      const dom = new JSDOM(html,{ runScripts: 'dangerously',resources: 'usable' });
      window = dom.window;
      document = window.document;
    });

    it('defines a custom element',async function() {
      await window.customElements.whenDefined('my-component');
      expect(window.customElements.get('my-component')).to.exist;
    })
  })
})

所以这通过了断言，但因为测试不知道脚本，所以没有覆盖指标。

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |                   
----------|---------|----------|---------|---------|-------------------

能够测试和报告覆盖率会很好，但现在必须这样做。

使用 jsdom 测试 Web 组件

如何解决使用 jsdom 测试 Web 组件

解决方法

相关推荐