如何对反应组分的方法进行单元测试？

Question

如何对反应组分的方法进行单元测试？

bie*_*ier 49 unit-testing chai reactjs enzyme

我正在尝试对我的reactjs组件进行单元测试:

import React from 'react';
import Modal from 'react-modal';
import store from '../../../store'
import lodash from 'lodash'

export class AddToOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {checked: false}
    //debugger
  }
  checkBoxChecked() {
    return true
  }
  render() {
    console.log('testing=this.props.id',this.props.id )
    return (
      <div className="order">
        <label>
          <input
            id={this.props.parent}
            checked={this.checkBoxChecked()}
            onChange={this.addToOrder.bind(this, this.props)}
            type="checkbox"/>
          Add to order
        </label>
      </div>
    )
  }
}

export default AddToOrder;

Run Code Online (Sandbox Code Playgroud)

刚开始我已经在努力断言checkBoxChecked方法:

import React from 'react-native';
import {shallow} from 'enzyme';
import {AddToOrder} from '../app/components/buttons/addtoorder/addtoorder';
import {expect} from 'chai';
import {mount} from 'enzyme';
import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
global.document = doc
global.window = doc.defaultView

let props;
beforeEach(() => {
  props = {
    cart: {
      items: [{
        id: 100,
        price: 2000,
        name:'Docs'
      }]
    }
  };
});

describe('AddToOrder component', () => {
  it('should be handling checkboxChecked', () => {
    const wrapper = shallow(<AddToOrder {...props.cart} />);
    expect(wrapper.checkBoxChecked()).equals(true); //error appears here
  });
});

Run Code Online (Sandbox Code Playgroud)

```

如何在组件上单元测试方法？这是我得到的错误:

TypeError: Cannot read property 'checked' of undefined

Run Code Online (Sandbox Code Playgroud)

Answer 1

Swa*_*nil 61

你快到了.只需改变你对此的期望:

expect(wrapper.instance().checkBoxChecked()).equals(true);

Run Code Online (Sandbox Code Playgroud)

您可以通过此链接了解有关使用酶测试组分方法的更多信息

您好,非常感谢您的解决方案,它对我帮助很大.你知道是否有办法用纯粹的笑话测试组件功能而没有酶？ (3认同)
嘿@AttilaMolnár 回复得很晚，但您应该能够执行`MyComponent.prototype.method()`。React 只是将方法附加到 `prototype`。 (2认同)

Answer 2

Or *_* A. 8

对于那些发现接受的答案不起作用的人,.dive()请在使用之前尝试使用浅包装.instance():

expect(wrapper.dive().instance().somePrivateMethod()).toEqual(true);

Run Code Online (Sandbox Code Playgroud)

参考:用酶测试组分方法

仅当您将组件包装在某些东西中时才需要这样做，例如 Redux connect 方法。 (2认同)

归档时间：	8 年，8 月前
查看次数：	36010 次
最近记录：	6 年，7 月前