React组件Jest测试中的依赖注入问题咨询

我来帮你拆解这个问题——当前你的UserOnSamePageAlert组件在构造函数里直接实例化了OnSamePageSubscription，这导致测试时无法灵活替换这个依赖，依赖注入就是解决这个问题的关键。下面是具体的实现步骤：

1. 修改组件，支持依赖注入 #

首先我们要调整组件代码，让OnSamePageSubscription可以通过props传入，同时保留默认值，不影响组件的正常使用：

import OnSamePageSubscription from './path-to-your-subscription';

class UserOnSamePageAlert extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { connected_users: [] }; 
    // 用props传入的订阅类，默认使用原类
    const SubscriptionClass = props.subscriptionClass || OnSamePageSubscription;
    // 初始化订阅实例
    this.onSamePageChannel = new SubscriptionClass({
      current_user: sessionStorage.getItem('current_user'),
      url: props.urlToSubscribe,
      onUpdate: this.onUserAction,
    }); 
  } 

  // 假设你的onUserAction是处理状态更新的方法
  onUserAction = (updatedUsers) => {
    this.setState({ connected_users: updatedUsers });
  }

  ... 更多代码 ... 
} 

这样修改后，组件的生产环境用法完全不变，但测试时我们可以传入一个mock的订阅类。

2. 编写Jest测试用例，注入Mock依赖 #

接下来我们创建mock版本的OnSamePageSubscription，并在测试时注入到组件中：

步骤2.1：创建Mock订阅类 #

我们可以用Jest的jest.fn()来创建一个mock类，跟踪它的实例化和方法调用：

// 模拟订阅类，捕获初始化参数和onUpdate回调
const MockSubscription = jest.fn(({ onUpdate }) => ({
  // 如果订阅类有其他方法，比如unsubscribe，也可以在这里模拟
  unsubscribe: jest.fn()
}));

步骤2.2：编写测试用例 #

现在我们可以编写测试，验证组件的行为：

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import UserOnSamePageAlert from './UserOnSamePageAlert';

describe('UserOnSamePageAlert', () => {
  let container = null;

  beforeEach(() => {
    // 创建一个DOM容器用于挂载组件
    container = document.createElement('div');
    document.body.appendChild(container);
    // Mock sessionStorage.getItem
    jest.spyOn(window.sessionStorage, 'getItem').mockReturnValue('test-user-123');
  });

  afterEach(() => {
    // 清理组件和mock
    unmountComponentAtNode(container);
    container.remove();
    container = null;
    jest.restoreAllMocks();
  });

  test('初始化时正确创建订阅实例', () => {
    const testUrl = '/test-page';
    render(
      <UserOnSamePageAlert 
        urlToSubscribe={testUrl}
        subscriptionClass={MockSubscription} 
      />,
      container
    );

    // 验证订阅类被实例化，且参数正确
    expect(MockSubscription).toHaveBeenCalledTimes(1);
    expect(MockSubscription).toHaveBeenCalledWith({
      current_user: 'test-user-123',
      url: testUrl,
      onUpdate: expect.any(Function)
    });
  });

  test('onUpdate触发时更新组件状态', () => {
    // 挂载组件时注入mock类
    render(
      <UserOnSamePageAlert 
        urlToSubscribe="/test-page"
        subscriptionClass={MockSubscription} 
      />,
      container
    );

    // 获取组件实例的onUpdate回调
    const mockSubscriptionArgs = MockSubscription.mock.calls[0][0];
    const testUsers = ['user-456', 'user-789'];

    // 触发onUpdate回调
    mockSubscriptionArgs.onUpdate(testUsers);

    // 验证组件状态是否更新
    const componentInstance = container.firstChild._internalInstance.memoizedState;
    expect(componentInstance.connected_users).toEqual(testUsers);
  });
});

额外注意事项 #

• 如果你的OnSamePageSubscription有异步逻辑或者需要清理的资源（比如取消订阅），记得在测试的afterEach里调用mock的清理方法，避免测试污染。
• 如果你用的是React测试库（@testing-library/react）而不是react-dom，获取组件状态的方式会略有不同，可以通过查询UI元素的变化来验证状态更新，而不是直接访问组件实例。

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