亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 Enzyme 收聽 onClick

使用 Enzyme 收聽 onClick

慕斯709654 2021-06-24 10:38:01
我想斷言當一個禁用的按鈕被點擊時,它的onClick事件不會被觸發。我如何用酶來做到這一點?請參閱下面的示例代碼。謝謝!示例按鈕.jsx:import React from 'react';const SampleButton = () => (  <button    disabled={true}    onClick={() => console.log('You clicked me!')}    test-attr="button"    type="button"  >    Click Me  </button>);export default SampleButton;sampleButton.test.jsx:import React from 'react';import { shallow } from 'enzyme';import SampleButton from './sampleButton';test('cannot click button if disabled', () => {  const wrapper = shallow(<SampleButton />);  const button = wrapper.find('[test-attr="button"]');  button.simulate('click');  // assert that `onClick` has not been fired});
查看完整描述

1 回答

?
呼啦一陣風

TA貢獻1802條經驗 獲得超6個贊

真的沒有必要測試這個。該disabled道具是底層的HTML的一部分,所以通過測試它只是測試的HTMLbutton作品(你可以相信它)。更好的測試可能是檢查disabled道具是否true在您嘗試測試的條件下設置。


也就是說,一種方法是將您的onClick注入SampleButtonvia props,如下所示:


const SampleButton = ({ onClick }) => (

  <button

    disabled={true}

    onClick={onClick}

    test-attr="button"

    type="button"

  >

    Click Me

  </button>

);

然后你可以像這樣測試它:


test('cannot click button if disabled', () => {

  // Set up a mock function that allows you to make assertions

  const mockOnClick = jest.fn();

  // Pass it into SampleButton

  const wrapper = shallow(<SampleButton onClick={mockOnClick} />);

  const button = wrapper.find('[test-attr="button"]');

  button.simulate('click');

  // Make assertions

  expect(mockOnClick).not.toHaveBeenCalled();

});


查看完整回答
反對 回復 2021-06-24
  • 1 回答
  • 0 關注
  • 213 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號