如何导出React组件类及其方法以用于Jest测试？

嘿，我来帮你解决这个问题！你现在测试sum方法失败，是因为sum是Dashboard类的实例方法，你直接在测试里调用sum()当然找不到它——它不属于全局，而是绑定在组件实例上的。下面给你几个实用的解决方案：

方法一：创建组件实例调用方法 #

既然sum是类的实例方法，那我们只需要先创建Dashboard的实例，再调用这个实例上的sum方法就行。修改你的测试文件如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from '../Dashboard';

it('check component renders correctly', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Dashboard />, div);
});

it('check sum function returns correct value', () => {
  // 创建组件实例，如果组件依赖props，这里可以传空对象new Dashboard({})
  const dashboardInstance = new Dashboard();
  expect(dashboardInstance.sum(12, 12)).toEqual(24);
});

这个方法不需要改动组件代码，直接在测试里生成实例就能调用方法，适合快速验证类方法逻辑。

方法二：提取方法为独立纯函数并单独导出 #

如果想让方法更易测试（同时符合单一职责原则），可以把sum从组件类里提取成独立的纯函数，然后在组件里调用它，同时单独导出这个函数：

修改后的组件代码： #

import React from 'react'

// 把sum提取成独立的纯函数并导出
export const sum = (one, two) => {
  return one + two
}

class Dashboard extends React.Component {
  constructor(props) {
    super(props)
  }
  // 组件内的sum方法调用外部的纯函数
  sum(one, two) {
    return sum(one, two)
  }
  render() {
    return(
      <div>
        <h1>{this.sum(12, 14)}</h1>
      </div>
    )
  }
}

export default Dashboard

修改后的测试文件： #

import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard, { sum } from '../Dashboard';

it('check component renders correctly', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Dashboard />, div);
});

it('check sum function returns correct value', () => {
  // 直接导入sum函数进行测试
  expect(sum(12, 12)).toEqual(24);
});

这种方法的优势是，sum变成了不依赖组件上下文的纯函数，测试起来更简洁，而且逻辑和组件渲染解耦，后期维护也更方便。

方法三：从已渲染的组件实例中获取 #

如果你已经渲染了组件，也可以直接从ReactDOM.render返回的实例中调用方法：

it('check sum function from rendered component', () => {
  const div = document.createElement('div');
  // ReactDOM.render类组件时会返回组件实例
  const dashboardInstance = ReactDOM.render(<Dashboard />, div);
  expect(dashboardInstance.sum(12, 12)).toEqual(24);
});

这个方法适合已经有渲染测试的场景，不需要额外创建新实例，直接复用渲染后的实例即可。

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