Reactコンポーネントクラスメソッドをテストする方法

Question

私は、そのインスタンスメソッドのいくつかをテストしようとしているReactコンポーネントを持っていますが、どうすればよいのか理解できません。私を引きつけている問題は、私が試験でを参照しているという事実であり、またも私のテストでは別の文脈の中にあり、従ってundefinedと戻ってくるということです。これを処理する正しい方法は何ですか？私はテストのために冗談と酵素を使用しています

export default class MessageForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     message: '', 
    }; 
    } 

    onChange(event) { // testing this method 
    const message = event.target.value; // event is undefined 
    this.setState(prevState => Object.assign({}, prevState, { message })); // 'this' is undefined 
    } 

    handleOnClick(event) { 
    event.preventDefault(); 
    // do some stuff here 
    } 

    render() { 
    return (
     <Form action="post"> 
     <TextArea onChange={this.onChange} /> 
     <ExpireButtonGroup /> 
     <SubmitButton onClick={this.handleOnClick}> 
      <LockIcon src={lock} /> 
      Save 
     </SubmitButton> 
     </Form> 
    ); 
    } 
} 

：

は、ここに私のコンポーネントです。私はこれを見つけた

test('it should allow a message to be typed',() => { 
    const messageForm = shallow(<MessageForm />); 
    expect(messageForm.instance().onChange()) 
    }); 

----------- ----------- EDIT

：私はこのテストを使用する方法をトリガすることができています質問：How to mock React component methods with jest and enzyme ...助けているようですが、私はまだエラーcannot read property 'target' of undefinedで立ち往生しています。ここに私の新しいテストがあります：

test('it should handle a click event',() => { 
    const mockEvent = { 
     target: { dataset: { value: '60' }} 
    }; 
    const button = shallow(<ExpireButton value={40}>Save</ExpireButton>); 
    button.instance().handleOnClick(mockEvent) = jest.fn(); 
    button.update(); 
    button.simulate('click'); 
    expect(button.handleOnClick).toBeCalled(); 
    }); 
}); 

Answer 1

あなたはほとんどそれをしました。その場合は、必要に応じてパラメータを送信してください。

test('it should allow a message to be typed',() => { 
const messageForm = shallow(<MessageForm />); 
expect(messageForm.instance().onChange({target:"any text you want"})) 
});