polymer - 如何用 Jest 测试 Web 组件(lit-element)-6ren

polymer - 如何用 Jest 测试 Web 组件(lit-element)

转载作者：行者123 更新时间：2023-12-03 15:13:55

25

4

任何人都有一个很好的设置来使用 jest、jsdom 或类似的东西来测试自定义元素？我一直在使用 Puppeteer 和 Selenium，但它们使测试运行速度减慢太多。 jsdom 的任何其他替代方案或修复程序可以使以下测试运行吗？

import {LitElement} from 'lit-element';
import {html} from 'lit-html';

export class Counter extends LitElement {
  static get properties() {
    return Object.assign({}, super.properties, {
      count: {type: Number}
    });
  }

  render() {
    return html`Count is ${this.count}`;
  }
}

customElements.define('c-counter', Counter);

使用测试文件:

import './counter';

describe('c-counter', () => {
  it('should be registered', () => {
    expect(customElements.get('c-counter')).toBeDefined();
  });

  it('render', async () => {
    const element = window.document.createElement('c-counter');
    window.document.body.appendChild(element);

    await element.updateComplete;
    expect(element.innerHTML).toContain('Count is undefined');

    element.count = 3;
    await element.updateComplete;

    expect(element.innerHTML).toContain('Count is 3');
  });
});

最后这是当前的 jest 环境设置:

const {installCommonGlobals} = require('jest-util');
const {JSDOM, VirtualConsole} = require('jsdom');
const JSDOMEnvironment = require('jest-environment-jsdom');
const installCE = require('document-register-element/pony');

class JSDOMCustomElementsEnvironment extends JSDOMEnvironment {
  constructor(config, context) {
    super(config, context);

    this.dom = new JSDOM('<!DOCTYPE html>', {
      runScripts: 'dangerously',
      pretendToBeVisual: true,
      VirtualConsole: new VirtualConsole().sendTo(context.console || console),
      url: 'http://jsdom'
    });

    /* eslint-disable no-multi-assign */
    const global = (this.global = this.dom.window.document.defaultView);

    installCommonGlobals(global, config.globals);

    installCE(global.window, {
      type: 'force',
      noBuiltIn: false
    });
  }

  teardown() {
    this.global = null;
    this.dom = null;

    return Promise.resolve();
  }
}

module.exports = JSDOMCustomElementsEnvironment;

最佳答案

可以通过一些额外的设置。

如果您查看 open wc 文档，他们建议在浏览器中测试您的 Web 组件，他们已经使用 Karma 和 Headless Chrome 进行了测试。正如您已经指出的，Puppeteer 和 Selenium 对此来说太慢了，唯一可行的浏览器替代方案是 ElectronJS。有一个可用于 Jest 的运行者。

https://github.com/hustcc/jest-electron

这将允许您在能够访问 Shadow DOM 的真实浏览器中呈现您的 Web 组件，并且您的测试仍然会很快。像这样，我使用 Webpack 来处理我的代码。

// button.ts
import {html, customElement, LitElement, property} from "lit-element";

@customElement('awesome-button')
export class Button extends LitElement {

    @property()
    buttonText = '';

    render() {
        return html`<button id="custom-button"
            @click="${() => {}}">${this.buttonText}</button>`;
    }
}

网络包配置

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './index.ts',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
        new CleanWebpackPlugin()
    ],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

玩笑配置

module.exports = {
    preset: 'ts-jest',
    runner: 'jest-electron/runner',
    testEnvironment: 'jest-electron/environment',
    setupFiles: ['./dist/main.js'],
};

最后是我们的测试。

import {LitElement} from 'lit-element';

describe('awesome-button', () => {

    const AWESOME_BUTTON_TAG = 'awesome-button';
    const ELEMENT_ID = 'custom-button';
    let buttonElement: LitElement;

    const getShadowRoot = (tagName: string): ShadowRoot => {
        return document.body.getElementsByTagName(tagName)[0].shadowRoot;
    }

    beforeEach(() => {
        buttonElement = window.document.createElement(AWESOME_BUTTON_TAG) as LitElement;
        document.body.appendChild(buttonElement);
    });

    afterEach(() => {
       document.body.getElementsByTagName(AWESOME_BUTTON_TAG)[0].remove();
    });

    it('displays button text', async () => {
        const dummyText = 'Web components & Jest with Electron';
        buttonElement.setAttribute('buttonText', dummyText);
        await buttonElement.updateComplete;

        const renderedText = getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).innerText;

        expect(renderedText).toEqual(dummyText);
    });
    it('handles clicks', async () => {
        const mockClickFunction = jest.fn();
        buttonElement.addEventListener('click', () => {mockClickFunction()});

        getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).click();
        getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).click();

        expect(mockClickFunction).toHaveBeenCalledTimes(2);
    });
});

我什至写了一篇关于这个的博客文章，在那里你可以找到带有完整设置等的存储库。

https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element

关于polymer - 如何用 Jest 测试 Web 组件(lit-element)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55166509/

25

4

0

文章推荐： material-ui - 如何使用 material-ui Dialog PaperProps

文章推荐： mysql - 无法在 WSL 上安装 mysql-server

文章推荐： Google Cloud App Engine 中的 Angular 7 路由不起作用

文章推荐： html - 如何使用角 Material 表添加多个标题行

reactjs - jest 中的 jest.fn() 和 jest.spyOn() 方法有什么区别？
我正在为我的 react 项目编写单元测试用例，并使用 Jest 和 enzyme 来编写测试用例。我已阅读 Jest 文档 https://jestjs.io/docs/en/jest-object
reactjs - REACT JEST 错误无法从 'jest-matchers' 找到模块 'jest-expect.js'
运行测试时出现以下错误: 无法从“jest-expect.js”中找到模块“jest-matchers” at Resolver.resolveModule (node_modules/jest-
jestjs - 使用 jest.run() 或 jest.runCLI() 运行所有测试或以编程方式运行 jest 的方法
如何使用 jest.run() 或 jest.runCLI() 以编程方式运行所有测试？我应该用什么作为论据？我试图找到有关它们的文档但失败了。如果上述函数不起作用，如果我想以编程方式运行 jes
reactjs - Jest jest.mock函数具有不同的返回值
用 Jest 和 enzyme 测试 react 和 typescript ，我如何模拟这个 ExpectsVideo 函数，以便我可以根据我的测试用例场景定义它是否返回 true 或 false j
reactjs - Jest jest.mock函数具有不同的返回值
用 Jest 和 enzyme 测试 react 和 typescript ，我如何模拟这个 ExpectsVideo 函数，以便我可以根据我的测试用例场景定义它是否返回 true 或 false j
jestjs - Jest 模式 ""- 0 个匹配(从 jest 19 -> jest 20 移动)
我正在使用以下 jest.unittest.json 文件(通过 jest --config 选项使用): { "bail": false, "verbose": true, "trans
javascript - Jest js node_modules\jest\node_modules\jest-cli\build\cli\index.js :227 } catch {
我跑npm init npm i -D jest像这样 tutorial 运行推荐 nmp test 后出现此错误这不是生物.js 或生物.test.js 的错误，因为没有发生此文件错误。我怎样才能
javascript - jest mockgoose - jest 在测试运行完成后一秒钟没有退出
我有一个 Mongoose 模型: var mongoose = require("mongoose"); var transactionSchema = mongoose.Schema({ ca
jestjs - 试图运行 jest 的 jest 版本不正确
我在我的角度项目中进行了 Jest 测试。我有一个 package.json 文件指定了我想用来运行测试的 jest 版本。该文件包括: "@types/jest": "^24.0.18", "je
reactjs - Jest 类型错误 : is not a constructor in Jest. 模拟
我正在尝试使用 jest 编写单元测试用例，并且需要模拟以下模式。我收到 TypeError: is not a constructor。用例:我的用例如下所述我的组件.js : import
mongoose - jest 和 mongoose - jest 检测到打开的句柄
所以我正在使用 jest测试我的 node.js 应用程序，测试完成得很好，但我从 jest 收到一条关于打开句柄的消息。任何见解？ jest --detectOpenHandles 通过 src/l
jestjs - Jest - 如何在 babel-jest 中使用根斜杠导入？
我正在使用 Babel Jest 来转换我的代码以进行测试。我不知道如何使用相对于项目根目录的路径。例如，如果我在一个测试文件中导入一个模块:/imports/ui/myModule Jest 抛
javascript - Jest 覆盖率测试报告的准确性如何？ Jest 测试覆盖率是如何计算的？我应该如何分析覆盖率结果？
我正在致力于更新 Express 微服务的测试。对于某些目录(即我们的 /utils 文件夹)，我编写了大量测试，显示覆盖率达到 80-90%。在/routes目录下，有0个测试，但显示100%。总
javascript - 如何为特定文件夹配置 Jest 和 babel-jest
我收到以下错误: import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import 原因是一些模块/s在npm中发布时没有编
javascript - Jest 模拟和错误处理 - Jest 测试跳过我函数的 "catch"
我正在创建一个 Jest 测试来测试是否记录了用于 superFetch 函数错误处理的指标。我的方法是为 retryFetch 创建一个模拟函数并返回一个 Promise 拒绝事件。我希望它能进入
javascript - 如何在 jest 的覆盖范围内忽略由 jest 生成的快照？
我正在设置一些新的配置来开 Jest ，我忽略了一些文件，比如 *.stories.js，但是当我使用 *.js.snap 或 *.snap，这个 Jest 不太行。我正在使用 react-scri
reactjs - Jest 遇到意外标记，因为试图导入 Jest 无法解析的文件
PS E:\react\Code\UI> yarn 测试 yarn 运行 v1.17.3$开 Jest 失败 src/App.test.js ● 测试套件运行失败 Jest encountered a
reactjs - 开 Jest jest.fn 它正在被调用，但期望失败
我是开 Jest 测试的新手，我写了下面的测试。我 Jest mock 了一个函数并将其作为参数传递。但是当运行测试时，在日志中我可以看到函数 onSuccess 被调用。但 expect 失败并出现
javascript - Jest 检测到以下 2 个打开的句柄可能会阻止 Jest 退出 :
我是测试新手。我正在使用 JEST 来测试我的 nodejs API。当我在一个文件中编写所有测试时，它可以正常运行，没有任何错误，但是当我分离它时，它给我的端口已经在使用中。至于每个文件，它运行不同
javascript - jest.mock 中的 Jest 'TypeError: is not a function'
我正在编写一个 Jest 模拟，但是在模拟本身之外定义一个模拟函数时我似乎遇到了问题。我有一个类: myClass.js class MyClass { constructor(name) {

首页

博学

6Ren·AI

商城

polymer - 如何用 Jest 测试 Web 组件(lit-element)