标签: chai-enzyme

我尝试使用酶来模拟change复选框上的事件,并使用chai-enzyme断言是否已经检查过.

这是我的Hello反应组件:

import React from 'react';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    }
  }

  render() {
    const {checked} = this.state;
    return <div>
      <input type="checkbox" defaultChecked={checked} onChange={this._toggle.bind(this)}/>
      {
        checked ? "checked" : "not checked"
      }
    </div>
  }

  _toggle() {
    const {onToggle} = this.props;
    this.setState({checked: !this.state.checked});
    onToggle();
  }
}

export default Hello;

我的测试:

import React from "react";
import Hello from "../src/hello.jsx";
import chai from "chai";
import {mount} from "enzyme"; …

我正在开发一个包装器组件,用于在React中平滑地加载图像.我使用含有mocha,chai和sinon的酶对我的组件进行单元测试.在这里的测试中,我试图测试:

1. 加载图像时更新组件的状态

2. onLoad调用组件上的实例方法

const wrapper = shallow( );

const onLoad = wrapper.find('img').props().onLoad;
const onLoadSpy = sinon.spy(onLoad); wrapper.update();
const status = wrapper.state().status;
expect(onLoadSpy).to.have.been.called;
expect(status).to.equal('LOADED');

我发现状态更新既不会被酶反映,也不会更新onLoad间谍的通话计数.这是测试的相应代码:

export default class Image extends Component {
  constructor(props) {
    super(props);
    if (props.src != null && typeof props.src === 'string') {
      this.state = {
        status: LOADING,
      };
    } else {
      this.state = {
        status: PENDING,
      };
    }
    this.onLoad = this.onLoad.bind(this);
  }

  onLoad() {
    this.setState({
      status: LOADED,
    });
  }

  render() {
    //lots of code above …

it('should call setCampaignDate on click', function () {
    let spySetCampaign = sinon.spy(wrapper.instance(), 'setCampaignDate');
    let datePickers = wrapper.find('.campaign-date-tab').dive().find(Datepicker);
    assert.equal(datePickers.length, 2);
    console.log(datePickers);
    var date = new Date();

    for (let index = 0; index < datePickers.length; index++) {
      datePickers.simulate('change'); 
      sinon.assert.calledOnce(spySetCampaign.withArgs(date, 'startDate'));
    }


  });

我正在尝试模拟我的"更改"功能并尝试测试是否调用'setCampaignDate'.这里的问题是find返回的浅组件的长度是2:

let datePickers = wrapper.find('.campaign-date-tab').dive().find(Datepicker);

当试图在'datepickers'上调用模拟时,它会产生如下错误:

'Error: Method “props” is only meant to be run on a single node. 2 found instead.'.

不确定如何模拟节点大于1的组件.

我在使用新React.create()api的地方有一个组件，如何测试document.activeElement应该等于当前的ref组件。

零件 ：

export class Automatic extends Component {
    componentDidMount = () => this.focusContainer()
    componentDidUpdate = () => this.focusContainer()

    container = React.createRef()
    focusContainer = () => this.container.current.focus()

 render = () => {
        return (
            <div
                name='automatic'
                onKeyPress={this.captureInput}
                onBlur={() => setTimeout(() => this.focusContainer(), 0) }
                ref={this.container}
                tabIndex={0}
            >
               ..... 
            </div>
}

旧测试（有效）：

 it('should focus container on mount', () => {
        automatic = mount(<Automatic classes={{}} />, mountContext)

        document.activeElement.should.be.equal(automatic.ref('container'))
    })

新的（无效）：

 it.only('should focus container on mount', () => { …

我有一个函数说它onClickOfCreateAccountButton是在单击按钮时从我的子组件调用的，但逻辑是写在父组件中的。

我如何模拟它？

我的代码：

    onClickOfCreateAccountButton() {
    const el = document.getElementsByClassName('SignInSlider-loginSlider')[0];
    const el1 = document.getElementsByClassName('SignInSlider-createAccountSlider')[0];

    el.classList.add('SignInSlider-animate-show');
    el.classList.remove('SignInSlider-animate-hide');
    setTimeout(() => {
        this.props.signInSliderActions.openCreateAccountPage();
        el1.classList.add('SignInSlider-animate-show');
    }, 5);
}


return (
        <SlidePanel
            isOpenPanel={this.props.isOpenPanel}
            onClosePanel={!hideBackArrowCloseButton && this.onBackButtonClick}
            onPrimaryCloseButtonClick={this.onPrimaryCloseButtonClick}
            panelTitle={!hideBackArrowCloseButton && 'Back to Sign-In'}
            hideBackArrowCloseButton={hideBackArrowCloseButton}
            isPrimaryCloseButtonRequired>

            <div className={cx('signInSliderPanel')}>

                <div className={cx('loginSlider')}>
                    { !showCreateAccountPage && !showWelcomePage && !showForgotPasswordPage &&
                    <LoginWrapper
                        signInDetails={signInDetails}
                        deviceType={deviceType}
                        preferences={preferences}
                        messagesTexts={messagesTexts}
                        source="account"
                        actions={this.props.signInActions}
                        onClickOfCreateAccountButton={this.onClickOfCreateAccountButton}
                        onClickPasswordReset={this.onClickPasswordReset}
                        isSignInSliderReq
                    /> }
                </div>

                <div className={cx('createAccountSlider')}>
                    {showCreateAccountPage &&
                    <CreateAccountWrapper
                        createAccount={createAccount}
                        isSignInSliderReq
                        deviceType={deviceType}
                        messagesTexts={this.props.messagesTexts}
                        preferences={this.props.preferences}
                        actions={this.props.createAccountActions}/> } </div>
                <div className={cx('passwordSlider')}>
                    {showForgotPasswordPage …