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

Question

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

这是我的 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;

我的笑话文件位于 tests 文件夹 (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

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

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

你是怎么发明的？

inputs.change = jest.genMockFunction();

首先 - 你需要渲染组件到 DOM 或者可能使用浅渲染，阅读更多关于它的信息，开玩笑有很好的文档

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

何时可以找到 react 元素的

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

而且只有你可以将事件分派给这个元素

这方面的单元测试开玩笑

同时阅读更多关于 React 的内容，永远不要做那样的事情

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

在 React 中你必须只有状态和道具

应该喜欢

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

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

小提示

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

在 google 中搜索为什么你应该这样做

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

Unit Testing with Jest on React components

javascript

unit-testing

reactjs

jestjs