如何测试使用回调ref的React组件是否添加style属性？

首先得说清楚你遇到的核心问题：wrapper.debug()展示的是React虚拟DOM的快照，而你通过回调Ref直接操作的是真实DOM的style属性，这部分变化不会同步到虚拟DOM里，所以debug输出里看不到，但真实DOM上其实已经生效了。所以测试的关键是直接去检查真实DOM元素的样式，而不是依赖虚拟DOM的输出。

下面给你两种常见测试库的正确写法，你可以根据自己的项目情况选择：

假设你的组件大概是这样（补全示例方便理解） #

import React, { useEffect, useRef } from 'react';

const StyledComponent = () => {
  const targetRef = useRef(null);

  const applyDynamicStyle = () => {
    if (targetRef.current) {
      targetRef.current.style.height = '200px';
      console.log(targetRef.current.style.height); // 你看到的输出数字应该是类似"200px"
    }
  };

  // 挂载时执行样式设置
  useEffect(() => {
    applyDynamicStyle();
  }, []);

  return <div ref={targetRef} className="styled-box">测试元素</div>;
};

export default StyledComponent;

方法一：用Enzyme测试 #

如果你的项目用Enzyme，测试时要获取真实DOM节点来检查样式：

import { mount } from 'enzyme';
import StyledComponent from './StyledComponent';

describe('StyledComponent', () => {
  // 你已经写的第一个测试：验证方法被调用
  it('triggers applyDynamicStyle on mount', () => {
    // 这里可以用jest spy监听方法，如果是组件内部函数，建议把它抽成可测试的独立函数
    const mockApplyStyle = jest.fn();
    // 或者如果是组件内的函数，也可以通过ref获取（这里简化示例）
    const wrapper = mount(<StyledComponent />);
    // 假设你已经验证了方法被调用，这里省略具体实现
    expect(mockApplyStyle).toHaveBeenCalled();
  });

  // 第二个测试：验证样式正确应用到DOM
  it('applies the correct height style to the DOM element', () => {
    const wrapper = mount(<StyledComponent />);
    // 获取真实DOM节点，而不是Enzyme的wrapper对象
    const domElement = wrapper.find('.styled-box').getDOMNode();
    // 直接检查DOM元素的style属性
    expect(domElement.style.height).toBe('200px');
  });
});

方法二：用React Testing Library测试 #

如果用React Testing Library，写法更简洁，它默认就关注真实DOM的行为：

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

describe('StyledComponent', () => {
  it('applies dynamic height style to the element', async () => {
    render(<StyledComponent />);
    // 获取目标元素
    const targetElement = screen.getByText('测试元素');
    // 直接用toHaveStyle断言，或者检查style属性
    expect(targetElement).toHaveStyle({ height: '200px' });
    // 如果样式是异步设置的（比如等API返回后），用waitFor等待
    // await waitFor(() => {
    //   expect(targetElement).toHaveStyle({ height: '200px' });
    // });
  });
});

关键注意点 #

• 不要依赖wrapper.debug()的输出判断样式是否生效，它只反映React虚拟DOM的初始或更新后的状态，直接DOM操作的变化不会体现在这里。
• 如果样式是异步触发的（比如依赖Promise、定时器），一定要用waitFor或者async/await等待样式生效后再断言。

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