Question

我正在尝试用酶测试反应类方法。该方法应处理输入的更改并设置状态。我收到错误＆＃39;无法读取属性＆＃39; setState＆＃39;未定义的

component.js

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };

        this.handleChange = this.handleChange.bind(this);

        ...
    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value})
    }

    ...

    return(
        ...
        <TextField name='username' onChange={this.handleChange} />
    )

test.js

it('handles change', () => {
    const spy = sinon.spy(LoginPage.prototype, 'handleChange');
    const _wrapper = shallow(<LoginPage />);

    spy({
            event: {
                target: {
                    name: 'username',
                    value: 'username'
                }
            }
        }
    );

    expect(_wrapper.state().username).to.equal('username');
})

}）;

Answer 1

在我回答之前，请注意，还有其他一些方法来编写组件，这样可以更容易地编写这些测试（并更好地使用间谍/存根）。例如，您可以传递＆＃34; onChange＆＃34;支持组件，并使用该支柱。

所以，回答它，你正在调用一个没有＆＃34;绑定的功能＆＃34;任何事情。您this（在您创建的间谍内）是undefined，这就是您遇到错误的原因：

无法读取属性＆＃39; setState＆＃39;未定义的

解决这个问题的一个简单方法是调用＆＃34;绑定＆＃34;功能：

请注意，您需要导入＆＃34; TextField＆＃34;组件，以便执行＆＃34; find＆＃34;正确地

import TextField from '../path/to/TextField.jsx';

it('handles change', () => {
    const _wrapper = shallow(<LoginPage />);

    _wrapper.find(TextField).simulate('change', {
        target: {
            name: 'username',
            value: 'username',
        },
    });

    expect(_wrapper.state().username).to.equal('username');
});

这样，simulate('change')将使用传递的参数调用onChange。在这种情况下，onChange会调用handleChange，这次是this＆＃34;绑定＆＃34;正确。

反应组分内的测试方法

1 个答案: