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

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);
});

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

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

谢谢

标签： javascriptreactjsunit-testingtddjestjs

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 方法。

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