Question

我是React和Jest的新手，我发现很难为以下代码编写单元测试。
我的反应代码运行良好，但我无法弄清楚测试部分它的。我试图查看几个类似的帖子，但仍然无法做到正确。

这是我的React组件（MySignUpForm.js）：

var React = require('react');
var ReactDOM = require('react-dom');

var profileFor;
var Gender;
var MySignUpForm = React.createClass ({

 onRequiredGender: function (e) {
      Gender= e.currentTarget.value
  },

render : function() {         

    return (

           <div className="col-sm-6 col-xs-6 r_pad_0">
           <input className="myRadio" type="radio" name="gender" value="Male" onChange={this.onRequiredGender}/>
           <span className="l_pad_5">Male</span>
           </div>
           <div className="col-sm-6 col-xs-6 r_pad_0">
           <input className="myRadio" type="radio" name="gender" value="Female" onChange={this.onRequiredGender}/>
           <span className="l_pad_5">Female</span>
          </div>            
)

},

    });

module.exports = MySignUpForm;

我在测试文件夹中的jest文件（MySignUpFormTest.js）：

jest.unmock('../MySignUpForm');

//import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import MySignUpForm from '../MySignUpForm';

describe('MySignUpForm', () => {
it("changes the checked state when clicked", () => {
var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio');
inputs.change = jest.genMockFunction();

  expect(inputs[0].getDOMNode().checked).toBe(false);
  TestUtils.Simulate.change(inputs[1], {target: {value: 'Female'}});
 expect(inputs[0].getDOMNode().checked).toBe(false);
 expect(inputs[1].getDOMNode().checked).toBe(true);

 expect(inputs.change).toBeCalled(); //Fails
 expect(inputs.change.mock.calls.length).toBe(1); //Fails too
});

});

我希望测试单选按钮值的更改。

提前谢谢。

Answer 1

尝试查找输入，如果输入不存在则返回空数组，模块作为参数但需要反应元素。

var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio');

你是如何发明它的？

inputs.change = jest.genMockFunction();

首先 - 你把渲染组件放到DOM中，或者使用Shallow渲染，阅读更多关于它的内容，jest有很好的文档

const mySignUpFormComponent = TestUtils.renderIntoDocument(<MySignUpForm />);

当你找到反应元素的

时

var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio');

并且只有在您可以将事件发送到此元素之后

这方面用jest进行单元测试

还阅读更多有关反应的信息，从不做类似的事情

var Gender;
 onRequiredGender: function (e) {
      Gender= e.currentTarget.value
  },

在反应过程中你必须只有状态和道具

应该

var MySignUpForm = React.createClass ({
constructor: function () {
    super(props);
    this.state = {
        gender: false
    }
}
onRequiredGender: function (e) {
    this.setState({
        gender: e.target.value
    })
},

这个如果没有解决的例子，请阅读更多关于反应然后再试一次。

小提示

<input onChange={ this.onRequiredGender.bind(this) }/>

在谷歌搜索为什么要这样做

使用Jest对React组件进行单元测试

1 个答案: