Fatal编程技术网
  • reactjs/
  • reactjs中输入更改和按钮的jest测试用例

reactjs中输入更改和按钮的jest测试用例

reactjs jestjs

reactjs中输入更改和按钮的jest测试用例,reactjs,jestjs,sinon,Reactjs,Jestjs,Sinon,我不太会开玩笑，所以我不知道如何继续开玩笑。我已经使用jest编写了测试用例，用于输入更改，并单击下面组件的按钮。但它失败了。“方法”道具的问题仅适用于在单个节点上运行。改为0。请帮助我 代码： import React from 'react'; import { Col } from 'react-bootstrap'; class FITB extends React.Component { constructor(props) { super(props); thi

我不太会开玩笑，所以我不知道如何继续开玩笑。我已经使用jest编写了测试用例，用于输入更改，并单击下面组件的按钮。但它失败了。“方法”道具的问题仅适用于在单个节点上运行。改为0。请帮助我

代码：

import React from 'react';
import { Col } from 'react-bootstrap';

class FITB extends React.Component {
  constructor(props) {
    super(props);
    this.String = String;
    this.defaultTextSize = 8;
    this.state = {
      inputList: [],
      splitList: [],
      count: 0,
      isValid: false
    };
    this.onInputChange = this.onInputChange.bind(this);
    this.onClickSend = this.onClickSend.bind(this);
    this.checkInputValidations = this.checkInputValidations.bind(this);
  }

  componentDidMount() {
    this.initialize();
  }

  onInputChange(index) {
    return (event) => {
      const inputList = this.state.inputList;
      let isValid = true;
      inputList[index] = event.target.value;
      if (!this.isValidInput(inputList[index])) {
        isValid = false;
      }
      this.setState({
        inputList,
        isValid
      });
      // console.log('onInputChange fib state', this.state);
    };
  }

  onClickSend() {
    const {
      splitList,
      inputList,
      count
    } = this.state;
    // console.log('onClickSend fib before state', this.state);
    const onReply = this.props.onReply;
    let fullText = '';
    splitList.map((text, index) => {
      fullText += text;
      if ((index < count - 1) && inputList[index]) {
        fullText += inputList[index];
      }
      return true;
    });

    if (onReply) {
      onReply(fullText);
    }
    // console.log('onClickSend fib after state', this.state);
  }

  isValidInput(text) {
    const regex = /^[\u0020-\u007e]*$/;
    const replaceChar160RegExp = new RegExp(this.String.fromCharCode(160), 'g');
    return regex.test(text.replace(replaceChar160RegExp, ' '));
  }

  initialize() {
    let text = '';
    this.props.messages.map((element) => {
      if (element.type && (typeof element.type === 'string') && (element.type === 'FILL_IN_THE_BLANK')) {
        text = element.message;
      }
      // console.log('inside fib', text);
      return text;
    });
    const splitList = text.split(/_+/g);
    this.setState({
      splitList,
      count: splitList.length
    });
    // console.log('init fib state', this.state);
  }

  checkInputValidations() {
    const {
      inputList,
      count,
      isValid
    } = this.state;
    let i;
    let flag = false;
    for (i = 0; i < count - 1; i += 1) {
      if (!inputList[i] || inputList[i].trim() === '') {
        flag = true;
      }
    }
    // console.log('checkInputValidations', this.state);
    return flag || !isValid;
  }

  render() {
    const {
      splitList,
      count,
      inputList
    } = this.state;
    // console.log('reder fitb', this.state);
    return (
      <Col lg={12} className="rply-block">
        <Col lg={11} className="textarea-block">
          <div className="fitb-wrap">
            { splitList && splitList.map((item, index) => (
              <span>
                <span className="fitb-text">{item}</span>
                { (index < count - 1) && (
                  <input
                    className="fitb-input"
                    type="text"
                    maxLength="40"
                    size={(inputList[index] && inputList[index].length > this.defaultTextSize && inputList[index].length) || this.defaultTextSize}
                    value={inputList[index]}
                    onChange={this.onInputChange(index)}
                    autoFocus={index === 0}
                    aria-describedby={count > 1 ? `Missing word ${index + 1} of ${count - 1}` : 'Missing word'}
                    aria-label="Fill in missing words"
                  />
                )}
              </span>
            ))}
          </div>
        </Col>
        <Col lg={1} className="">
          <button
            className="btn-info-dm"
            role="button"
            tabIndex="0"
            onClick={this.onClickSend}
            disabled={this.checkInputValidations()}
          >Send</button>
        </Col>
      </Col>
    );
  }
}

FITB.propTypes = {
  onReply: React.PropTypes.isRequired,
  messages: React.PropTypes.array
};

export default FITB;

从“React”导入React；
从'react bootstrap'导入{Col}；
类FITB扩展了React.Component{
建造师（道具）{
超级（道具）；
this.String=String；
this.defaultTextSize=8；
此.state={
输入列表：[]，
拆分列表：[]，
计数：0，
isValid:false
};
this.onInputChange=this.onInputChange.bind（this）；
this.onClickSend=this.onClickSend.bind（this）；
this.checkInputValidations=this.checkInputValidations.bind（this）；
}
componentDidMount（）{
这是初始化（）；
}
onInputChange（索引）{
返回（事件）=>{
const inputList=this.state.inputList；
让isValid=true；
inputList[索引]=event.target.value；
如果（！this.isValidInput（inputList[index]））{
isValid=false；
}
这是我的国家({
输入列表，
有效
});
//log（'onInputChange fib state'，this.state）；
};
}
onClickSend（）{
常数{
拆分列表，
输入列表，
计数
}=本州；
//log（'onClickSend fib before state'，this.state）；
const onReply=this.props.onReply；
让全文=“”；
splitList.map（（文本，索引）=>{
全文+=文本；
如果（（索引<计数-1）和输入列表[索引]）{
全文+=输入列表[索引]；
}
返回true；
});
如果（回复）{
答复（全文）；
}
//log（'onClickSend fib after state'，this.state）；
}
isValidInput（文本）{
常量正则表达式=/^[\u0020-\u007e]*$/；
const replaceChar160RegExp=new RegExp（this.String.fromCharCode（160），'g'）；
返回regex.test（text.replace（replaceChar160RegExp.）；
}
初始化（）{
让text=''；
this.props.messages.map（（元素）=>{
if（element.type&（typeof element.type=='string'）&&（element.type=='FILL\u IN\u BLANK'））{
text=element.message；
}
//console.log（'insidefib'，text）；
返回文本；
});
const splitList=text.split（/u+//g）；
这是我的国家({
拆分列表，
计数：splitList.length
});
//log（'init fib state'，this.state）；
}
checkInputValidations（）{
常数{
输入列表，
计数
有效
}=本州；
让我；
让flag=false；
对于（i=0；i(
{item}
{（索引<计数-1）&(
this.defaultTextSize&&inputList[index].length）| | this.defaultTextSize}
值={inputList[index]}
onChange={this.onInputChange（索引）}
自动对焦={index==0}
aria descripbedby={count>1？{count-1}中的${index+1}缺少单词：'Missing word}
aria label=“填写缺少的单词”
/>
)}
))}
发送
);
}
}
FITB.propTypes={
回复：React.PropTypes.isRequired，
消息：React.PropTypes.array
};
出口违约FITB；
测试输入文件并单击按钮

import React from 'react';
import FITB from '../components/dialogManager/fitb';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

describe('FITB', () => {
  let component;
  const mockFn = jest.fn();
  beforeEach(() => {
    component = shallow(<FITB onReply={mockFn} />);
  });
  test('Should initialize the FITB content', () => {
    expect(component.find('.rply-block')).toHaveLength(1);
  });

  test('Should have been called send', () => {
    component.find('.btn-info-dm').simulate('click');
    expect(mockFn).toHaveBeenCalled();
  });
  test('Should render the text box', () => {
    expect(component.state().inputList).toEqual([]);
    expect(component.state().isValid).toEqual(false);
    // expect(component.find('input.fitb-input')).toBeDefined();
    console.log('state== ', component.state());
    console.log('input == ', component.find('.fitb-input'));
    component.find('.fitb-input').simulate('change', { target: { value: 'Qualitative data includes detailed interviews, direct _____, and historical records.' } });
    console.log('fitb-input onchange== ', component.find('.fitb-input'));
    expect(component.state().inputList).toEqual('Qualitative data includes detailed interviews, direct _____, and historical records.');
    expect(component.state().isValid).toEqual(true);
  });
  // test('Should check the input label', () => {
  //   const expectedFitbTextLabel = 'Fill in missing words';
  //   const fitbTextList = [];
  //   console.log('span fitb txt== ', component.find('.fitb-text').instance().label);
  //   component.find('.fitb-text').map((elem) => {
  //     fitbTextList.push(elem.text().trim());
  //   });
  //   expect(component.find('.fitb-text').instance().label).toEqual(expectedFitbTextLabel);
  // });
  test('Should render the fitbText ', () => {
    const expectedFitbText = 'Qualitative data includes detailed interviews, direct _____, and historical records.';
    const fitbTextList = [];
    console.log('span fitb txt== ', component.find('.fitb-text').text());
    // fitbTextList.push(expectedFitbText.split(/_+/g));
    // console.log('fitbTextList= ', fitbTextList);
    component.find('.fitb-text').map((elem) => {
      fitbTextList.push(elem.text().trim());
    });
    expect(fitbTextList).toEqual(expectedFitbText);
  });
  test('Should check the fitbText ', () => {
    const expectedFitbText = 'Qualitative data includes detailed interviews, direct _____, and historical records.';
    const fitbTextList = [];
    fitbTextList.push(expectedFitbText.split(/_+/g));
    expect(component.state().inputList).toEqual([]);
    console.log('input list init== ', component.state().inputList);
    component.find('input.fitb-input').simulate('change', { target: { value: 'test' } });
    console.log('input list== ', component.state().inputList);
    // component.find('input').instance().onInputChange(0);
    // expect(component.state().inputList).toEqual('test');
  });
});

从“React”导入React；
从“../components/dialogManager/FITB”导入FITB；
从“酶”导入{shall}；
从“反应测试渲染器”导入渲染器；
描述（'FITB'，（）=>{
let组件；
const mockFn=jest.fn（）；
在每个之前（（）=>{
组件=浅（）；
});
测试（'应初始化FITB内容'，（）=>{
expect（component.find（'.rply block'））.toHaveLength（1）；
});
测试（'应该被称为发送'，（）=>{
component.find（'.btn info dm'）。simulate（'click'）；
expect（mockFn）.tohavebeincall（）；
});
测试（'应呈现文本框'，（）=>{
expect（component.state（）.inputList）.toEqual（[]）；
expect（component.state（）.isValid）.toEqual（false）；
//expect（component.find（'input.fitb input'））.toBeDefined（）；
console.log（'state=='，component.state（））；
console.log（'input='，component.find（'.fitb input'）；
component.find（'.fitb input'）.simulate（'change'，{target:{value:'定性数据包括详细访谈、直接记录和历史记录。'}）；
console.log（'fitb-input onchange=='，component.find（'.fitb-input'）；
expect（component.state（）.inputList）.toEqual（'定性数据包括详细访谈、直接访问和历史记录'）；
expect（component.state（）.isValid）.toEqual（true）；
});
//测试（'应检查输入标签'，（）=>{
//const expectedFitbTextLabel='填写缺少的单词'；
//常量fitbTextList=[]；
//console.log（'span fitb txt='，component.find（'.fitb text'）.instance（）.label）；
//component.find（'.fitb text'）.map（（elem）=>{
//fitbTextList.push（elem.text（）.trim（））；
//   });
//expect（component.find（'.fitb text'）.instance（）.label）.toEqual（expectedfitbtextlab）；
// });
test（'应该呈现fitbText'，（）=>{
const expectedFitbText=“定性数据包括详细访谈、直接记录和历史记录。”；
常量fitbTextList=[]；
console.log（'span fitb txt='，component.find（'.fitb text'）.text（））；
//fitbtext.push（预期fitbtext.split（/+/g））；
//console.log（'fitbT

import React from 'react';

class ReplyButtons extends React.Component {
  constructor(props) {
    super(props);
    this.replyBtnWrap = '';
    this.replyBtnList = '';
    this.state = {
      list: [],
      isLeftArrowEnabled: false,
      isRightArrowEnabled: false
    };

    this.onClickLeftArrow = this.onClickLeftArrow.bind(this);
    this.onClickRightArrow = this.onClickRightArrow.bind(this);
    this.onClickReplyBtn = this.onClickReplyBtn.bind(this);
  }

  componentDidMount() {
    this.initializeList();
  }

  componentDidUpdate() {
    this.checkElementOffset();
  }

  onClickRightArrow() {
    const wrapElement = this.replyBtnWrap;
    const listElement = this.replyBtnList;
    const wrapWidth = wrapElement.offsetWidth;
    const listWidth = listElement.offsetWidth;
    let listLeft = wrapElement.scrollLeft;
    let listOverflowWidth = 0;
    listLeft += 400;
    listOverflowWidth = listWidth - listLeft;
    if (listOverflowWidth < 0) {
      listLeft = listWidth - wrapWidth;
    }
    wrapElement.scrollLeft = listLeft;
    this.checkElementOffset();
  }

  onClickLeftArrow() {
    const wrapElement = this.replyBtnWrap;
    let listLeft = wrapElement.scrollLeft;

    listLeft -= 400;

    if (listLeft < 0) {
      listLeft = 0;
    }
    wrapElement.scrollLeft = listLeft;
    this.checkElementOffset();
  }

  onClickReplyBtn(item) {
    return () => {
      const onReply = this.props.onReply;
      if (onReply) {
        onReply(item);
      }
    };
  }

  checkElementOffset() {
    const wrapElement = this.replyBtnWrap;
    const listElement = this.replyBtnList;
    const wrapWidth = wrapElement.offsetWidth;
    const listWidth = listElement.offsetWidth;
    const listLeft = wrapElement.scrollLeft;
    let listOverflowWidth = 0;
    let isLeftArrowEnabled = false;
    let isRightArrowEnabled = false;
    if (listLeft > 0) {
      isLeftArrowEnabled = true;
    }
    listOverflowWidth = listWidth - listLeft - wrapWidth;
    if (listOverflowWidth > 0) {
      isRightArrowEnabled = true;
    }
    if (this.state.isLeftArrowEnabled !== isLeftArrowEnabled || this.state.isRightArrowEnabled !== isRightArrowEnabled) {
      this.setState({
        isLeftArrowEnabled,
        isRightArrowEnabled
      });
    }
  }

  initializeList() {
    // this.setState({
    //   list: [{
    //     type: 'MENU_ITEM',
    //     text: 'what is quantitative research?',
    //     return_value: 'what is quantitative research?'
    //   }, {
    //     type: 'MENU_ITEM',
    //     text: 'what is mixed method research?',
    //     return_value: 'what is mixed method research?'
    //   }, {
    //     type: 'MENU_ITEM',
    //     text: 'what is qualitative research?',
    //     return_value: 'what is qualitative research?'
    //   }, {
    //     type: 'MENU_ITEM',
    //     text: 'I had a different question',
    //     return_value: 'I had a different question'
    //   }, {
    //     type: 'MENU_ITEM',
    //     text: 'That was actually my answer',
    //     return_value: 'That was actually my answer'
    //   }]
    // });
    const replyButtonText = [];
    // console.log('reply btns props = ', this.props);
    if (this.props.messages) {
      this.props.messages.map((element) => {
        if (element.type && (typeof element.type === 'string') && (element.type === 'MENU_ITEM')) {
          replyButtonText.push(element);
        }
        return this.setState({ list: replyButtonText });
      });
    }
  }

  render() {
    const btnList = this.state.list;
    const {
      isLeftArrowEnabled,
      isRightArrowEnabled
    } = this.state;
    return (
      <div className="r-wrap">
        { isLeftArrowEnabled && (
          <button className="r-btn-left-arrow" onClick={this.onClickLeftArrow} role="button" tabIndex="0">
            <i className="glyphicon glyphicon-menu-left" />
          </button>
        )}
        <div className="r-btn-wrap" ref={(e) => { this.replyBtnWrap = e; }}>
          <div className="r-btn-list" ref={(e) => { this.replyBtnList = e; }}>
            {
              btnList && btnList.map(btnItem => <button
                className="r-btn"
                role="button"
                tabIndex="0"
                onClick={this.onClickReplyBtn(btnItem)}
                title={btnItem.text}
              >{btnItem.text}</button>)
            }
          </div>
        </div>
        { isRightArrowEnabled && (
          <button className="r-btn-right-arrow" onClick={this.onClickRightArrow} role="button" tabIndex="0">
            <i className="glyphicon glyphicon-menu-right" />
          </button>
        )}
      </div>
    );
  }
}

ReplyButtons.propTypes = {
  onReply: React.PropTypes.isRequired,
  messages: React.PropTypes.array
};

export default ReplyButtons;



import React from 'react';
import ReplyButtons from '../components/dialogManager/replybuttons';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

const mockOutputObj = [{
  type: 'MENU_ITEM',
  text: 'what is quantitative research?',
  return_value: 'what is quantitative research?'
}, {
  type: 'MENU_ITEM',
  text: 'what is mixed method research?',
  return_value: 'what is mixed method research?'
}];

describe('ReplyButtons', () => {
  let component;
  const mockFn = jest.fn();
  beforeEach(() => {
    component = shallow(<ReplyButtons onReply={mockFn} />);
  });

  test('Should initialize the ReplyButtons content', () => {
    expect(component.find('.r-wrap')).toHaveLength(1);
  });

  test('Should check the ReplyButtons click', () => {
    console.log('r-btn==> ', component.find('button.r-btn'));
    component.find('.r-btn').simulate('click');
    expect(mockFn).toHaveBeenCalled();
  });
});



component.find('button.r-btn')



beforeEach(() => {
    component = shallow(<ReplyButtons onReply={mockFn} messages={['1','2']}/>);
});