如何测试React组件内部的Web Component？

一、先确保测试环境能识别Web Component #

Web Component需要在测试环境中注册才能被正确渲染，你可以在测试文件顶部或全局测试配置文件（比如setupTests.js）中模拟注册目标组件：

class CustomInput extends HTMLElement {
  connectedCallback() {
    // 模拟组件的基础结构和事件逻辑
    this.innerHTML = '<input type="text">';
    const innerInput = this.querySelector('input');
    
    innerInput.addEventListener('input', (e) => {
      // 触发自定义change事件，和你的组件逻辑匹配
      this.dispatchEvent(new CustomEvent('change', {
        detail: { value: e.target.value },
        bubbles: true,
        cancelable: true
      }));
    });
  }
}

// 避免重复注册
if (!customElements.get('custom-input')) {
  customElements.define('custom-input', CustomInput);
}

二、基础渲染验证 #

用React Testing Library验证Web Component是否正确渲染，以及属性是否传递到位：

import { render, screen } from '@testing-library/react';
import Form from './Form';

test('custom-input组件正常渲染并携带正确属性', () => {
  render(<Form />);
  const customInput = screen.getByTestId('name-input');
  
  expect(customInput).toBeInTheDocument();
  expect(customInput).toHaveAttribute('name', 'name');
});

三、交互行为测试 #

重点测试Web Component和React组件的交互逻辑，比如输入触发回调的场景：

注意：先把原Form组件的handleName改成props传入，方便测试时注入mock函数：

// 修改后的Form组件
function Form({ handleName }) {
  return <div>
    <label htmlFor="">Name:</label>
    <custom-input
      name='name'
      data-testid='name-input'
      onChange={(e) => handleName(e.detail.value)}
    />
  </div>
}

测试代码：

import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('输入内容时正确触发handleName回调', () => {
  const mockHandleName = jest.fn();
  render(<Form handleName={mockHandleName} />);
  
  const customInput = screen.getByTestId('name-input');
  const innerInput = customInput.querySelector('input');
  
  // 模拟用户输入
  fireEvent.change(innerInput, { target: { value: 'Jack' } });
  
  // 验证回调被调用且参数正确
  expect(mockHandleName).toHaveBeenCalledWith('Jack');
});

四、关键注意事项 #

• 事件适配：如果Web Component使用自定义事件而非原生DOM事件，需要直接触发对应的自定义事件，比如：

  fireEvent(customInput, new CustomEvent('change', { detail: { value: 'test' } }));
  

• 避免测试内部细节：不要过度关注Web Component自身的实现，重点验证它和React组件的交互（属性传递、回调触发）即可。
• Polyfill支持：如果测试环境不支持Web Components API，需要引入@webcomponents/webcomponentsjs polyfill来兼容。

内容的提问来源于stack exchange，提问作者Jacksssss