如何导出组件类和该类方法？

Question

对于 jest 测试文件，我想导入组件和该方法。

例如我有这个组件：

import React from 'react'

class Dashboard extends React.Component {
    constructor(props) {
        super(props)
    }

    sum(one, two) {
        return one + two
    }

    render() {
        return(
            <div>
                <h1>{this.sum(12, 14)}</h1>
            </div>
        )
    }
}

export default Dashboard

所以，在测试文件中，我喜欢使用 toEqual 的 render 和 sum 函数来测试组件：

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

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

it('check sum function', () => {
    expect(sum(12, 12)).toEqual(24);
});

但是第二次测试和求和失败了，因为测试函数找不到求和函数...

如何导出包含方法的组件？

谢谢

Answer 1

如果你想测试一个不依赖于组件的函数，你可以使用static修饰符：

import React from 'react'

class Dashboard extends React.Component {
    constructor(props) {
        super(props)
    }

    static sum(one, two) {
        return one + two
    }

    render() {
        return(
            <div>
                <h1>{Dashboard.sum(12, 14)}</h1>
            </div>
        )
    }
}

export default Dashboard

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

it('check sum function', () => {
    expect(Dashboard.sum(12, 12)).toEqual(24);
});

在大多数情况下，没有必要单独测试 react-component 方法。

解决问题的另一种方法是将 sum 移至单独的模块。然后您可以将单元测试添加到此模块。