React组件单测进阶：全面剖析四种情景和对应组件改造单测编写指南

2023-10-15 14:23:24

随着React生态系统的不断发展，测试驱动开发（TDD）已成为构建可靠、可维护的React应用程序的必备实践。在TDD中，编写单元测试是关键步骤，可以确保组件的正确性、可靠性和可维护性。

在React组件单测进阶中，我们将重点关注四种常见情景：

基于类组件的状态管理
函数式组件的props管理
组件与外部依赖的交互
组件的渲染逻辑

针对每种情景，我们将探讨如何改造组件以使其更易于测试，并提供相应的单测编写指南，帮助开发者编写更健壮、可靠的React组件。

一、基于类组件的状态管理

类组件中状态的管理通常使用this.state对象，它是一个Plain JavaScript对象，不具备React的响应式特性。为了使类组件更易于测试，我们可以使用React提供的useState或useReducer钩子来管理状态，它们具有响应式特性，可以简化组件的测试。

改造组件 ：

// 旧的类组件状态管理
class Counter extends Component {
  state = { count: 0 };

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.incrementCount}>+</button>
        <span>{this.state.count}</span>
      </div>
    );
  }
}

// 新的函数式组件状态管理
const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={incrementCount}>+</button>
      <span>{count}</span>
    </div>
  );
};

单测编写指南 ：

// 组件单测
describe('Counter', () => {
  it('should increment the count when the button is clicked', () => {
    const wrapper = shallow(<Counter />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find('span').text()).toBe('1');
  });
});

二、函数式组件的props管理

函数式组件的props是不可变的，这使得测试函数式组件的props管理变得困难。为了使函数式组件更容易测试，我们可以使用React提供的useMemo钩子来缓存props的计算结果，从而减少对props的直接依赖。

改造组件 ：

// 旧的函数式组件props管理
const Counter = (props) => {
  const count = props.count;

  return (
    <div>
      <button onClick={() => props.incrementCount()}>+</button>
      <span>{count}</span>
    </div>
  );
};

// 新的函数式组件props管理
const Counter = (props) => {
  const count = useMemo(() => props.count, [props.count]);

  return (
    <div>
      <button onClick={() => props.incrementCount()}>+</button>
      <span>{count}</span>
    </div>
  );
};

单测编写指南 ：

// 组件单测
describe('Counter', () => {
  it('should increment the count when the button is clicked', () => {
    const wrapper = shallow(<Counter count={0} incrementCount={jest.fn()} />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find('span').text()).toBe('1');
  });
});

三、组件与外部依赖的交互

组件与外部依赖的交互通常通过props或钩子进行。为了使组件更易于测试，我们可以将外部依赖抽象为一个单独的模块，并通过props或钩子将该模块注入到组件中。

改造组件 ：

// 旧的组件与外部依赖的交互
const Counter = (props) => {
  const count = props.count;
  const incrementCount = props.incrementCount;

  useEffect(() => {
    // 从外部依赖获取数据
    const data = fetch('https://example.com/data');
    // 更新组件状态
    props.updateState(data);
  }, []);

  return (
    <div>
      <button onClick={incrementCount}>+</button>
      <span>{count}</span>
    </div>
  );
};

// 新的组件与外部依赖的交互
const Counter = (props) => {
  const count = props.count;
  const incrementCount = props.incrementCount;

  const data = useData();

  useEffect(() => {
    // 从外部依赖获取数据
    props.updateState(data);
  }, [data]);

  return (
    <div>
      <button onClick={incrementCount}>+</button>
      <span>{count}</span>
    </div>
  );
};

// 外部依赖模块
const useData = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch('https://example.com/data');
      setData(data);
    };

    fetchData();
  }, []);

  return data;
};

单测编写指南 ：

// 组件单测
describe('Counter', () => {
  it('should increment the count when the button is clicked', () => {
    const wrapper = shallow(<Counter count={0} incrementCount={jest.fn()} updateState={jest.fn()} />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find('span').text()).toBe('1');
  });

  it('should update the state when the data is fetched', () => {
    const wrapper = shallow(<Counter count={0} incrementCount={jest.fn()} updateState={jest.fn()} />);
    const data = { count: 1 };
    wrapper.find(Data).prop('data')(data);
    expect(wrapper.find('span').text()).toBe('1');
  });
});

四、组件的渲染逻辑

组件的渲染逻辑通常通过render方法实现。为了使组件更易于测试，我们可以将渲染逻辑抽象为一个单独的函数，并通过props将该函数注入到组件中。

改造组件 ：

// 旧的组件渲染逻辑
const Counter = (props) => {
  const count = props.count;
  const incrementCount = props.incrementCount;

  return (
    <div>
      <button onClick={incrementCount}>+</button>
      <span>{count}</span>
    </div>
  );
};

// 新的组件渲染逻辑
const Counter = (props) => {
  const renderContent = props.renderContent;

  return (
    <div>
      {renderContent()}
    </div>
  );
};

// 渲染逻辑函数
const renderContent = (count, incrementCount) => {
  return (
    <>
      <button onClick={incrementCount}>+</button>
      <span>{count}</span>
    </>
  );
};

单测编写指南 ：

// 组件单测
describe('Counter', () => {
  it('should render the correct content', () => {
    const wrapper = shallow(<Counter renderContent={renderContent} />);
    expect(wrapper.find('button').exists()).toBe(true);
    expect(wrapper.find('span').text()).toBe('0');
  });

  it('should increment the count when the button is clicked', () => {
    const incrementCount = jest.fn();
    const wrapper = shallow(<Counter renderContent={renderContent} incrementCount={incrementCount} />);
    wrapper.find('button').simulate('click');
    expect(incrementCount).toHaveBeenCalledTimes(1);
  });
});