Question

我正在使用Jest创造模拟和酶＆＃34; mount＆＃34;用于传递道具。我有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组件的道具。
我只使用onClickHandler挂载SampleClass组件作为示例。请告诉我如何将replyText和inputForPreText作为道具来安装组件。
如何模拟SampleClass组件，它将模拟调用带有一些数据的action.startChat。
如何使用一些更改的数据更改SetState，这些数据在数据更改时将其传递给组件和组件更新，但它应该通过调用来模拟 action.startChat

使用Jest Enzyme Mocking Props并从一个组件状态到其他组件

0 个答案: