我正在使用Jest来创建模拟和酶“mount”来传递道具 . 我有SampleClass.jsx渲染按钮 . 下面是代码 .

import React from 'react';
import action from '../../Creator.jsx';

export default class SampleClass extends React.Component {

constructor(props) {
    super(props)
    this.startChat = this.startChat.bind(this);
    this.action = action;
}

startChat(e) {
 //Here data is constructed
action.startChat({
         data: data
    })

    this.props.onClickHandle();
  }

   render(){
    return (<Button onClick={this.startChat} > </Button>)
}
}

下面是使用SampleClass的app.jsx .

import SampleClass from  /../../../SampleClass.jsx;
export default class App extends React.Component {

constructor( props) {
    super(props)
    this.state = {replyText : ''};
    this.handleChatReplyTextChange = 
    this.handleChatReplyTextChange.bind(this);
    this.handleOnClick = this.handleOnClick.bind(this);
}

handleChatReplyTextChange(text){
    this.setState( { replyText : text })
}

handleOnClick(){
    this.setState({ replyText: '' });
 }   
render()
{ 
 return (<SampleClass  onClickHandle={this.handleOnClick} text=
{this.state.replyText} inputForStartChat={this.props.inputForPreText}/>);
}
  }

我必须模拟SampleClasscomponent并使用下面的代码进行安装 .

import React from 'react';
 import { shallow , mount, render} from 'enzyme';
 import SampleClass from '../SampleClass';

 describe('Button', () => {

 let startChatComponent;
 let onClickHandle;
 let replyText;
 let inputForPreText;

 beforeEach(() => {

  onClickHandle = jest.fn();    

  startChatComponent = mount(<SampleClass onClickHandle={onClickHandle} />);
});

 it('Button click calls ComponentFetch', () => {

  const startChatComponentFetch = mount(<SampleClass onClickHandle={onClickHandle} replyText={replyText} inputForStartChat={inputForPreText} />);

  button.simulate('click',{ target: { value: 'Name 4' }});
  expect(onClickHandle,replyText,inputForStartChat).toBeCalledWith('Name 4');
});

});

我在下面的链接中做了一个简单的例子作为状态,但我的要求是传递道具和状态并将点击处理程序从一个组件转换为其他组件 .

Enzyme returns null for prop on shallow rendered react component

以下是问题?

  • 如何将replyText和inputForPreText模拟为从SampleClass.jsx传递到app.jsx并呈现SampleClass组件的props .

  • 我只使用onClickHandler挂载SampleClass组件作为示例 . 请让我知道如何传递replyText和inputForPreText作为装载组件的道具 .

  • 如何模拟SampleClass组件,它将模拟调用带有一些数据的action.startChat .

  • 如何使用一些更改的数据更改SetState,这些数据在数据更改时将其传递给组件和组件更新,但它应该通过调用action.startChat进行模拟