Question

我的jest unittest看起来像这样：

import React from 'react';
import renderer from 'react-test-renderer';
import ReactTestUtils from 'react-dom/test-utils'
import Calculator from "./calculator";

test('test that calculator', () => {
        const component = renderer.create(
            <Calculator></Calculator>
        );
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
        console.log('component=',component.refs);

        // Simulate click on button -> trigger sumCalc()
        ReactTestUtils.Simulate.click(component.refs.button);

});

当我运行测试时，我得到：

TypeError: Cannot read property 'button' of undefined

我的反应组件如下所示：

import React, {Component} from 'react';

export default class Calculator extends Component {
    constructor(props) {
        super(props);
        this.calcSum = this.calcSum.bind(this);
        this.state = {sum: 0};
    }

    calcSum() {
        console.log('this.refs.one=', this.refs.one);
        let s = Number(this.refs.one.value) + Number(this.refs.two.value);
        this.setState({sum: s});
    }

    render() {
        return (<div>
                <input type="text" placeholder="number 1" ref="one"/>
                <input type="text" placeholder="number 2" ref="two"/>
                <button ref="button" onClick={this.calcSum}>sum</button>
                sum: {this.state.sum}
            </div>
        );
    }
}

如何避免此错误？我错过了什么？该组件在渲染到DOM时起作用，但单元测试存在问题。

Answer 1

component.toJSON()返回JSON而不是JavaScript对象。此外，calcSum不是道具，而是在组件类上定义的方法。

因此，您可以使用getInstance()方法手动调用calcSum。

试试这个：

  const component = renderer.create(<Calculator />);

  component.getInstance().calcSum();

现在，您可以看到来自console.log的{{1}}输出。

为什么我的方法在我的jesttest中不是函数？

1 个答案: