web-dev-qa-db-ja.com

Reactコンポーネントの子でe.preventDefaultをモックする方法

反応するコンポーネントの子でインライン関数をモックする方法が本当にわかりません

私のスタック：sinon、chai、enzyme;

コンポーネントの使用：

_<ListItem onClick={() => someFn()} />
_

コンポーネントのレンダリング：

_render() {
    return (
      <li>
        <a href="#" onClick={e => {
            e.preventDefault();
            this.props.onClick();
          }}
        > whatever </a>
      </li>
    );
  }
_

ここに、e.preventDefault()を呼び出すonClick関数があります。 e.preventDefault()を呼び出さないように_<a href>_（link）に伝える方法は？ onClickをモックするにはどうすればよいですか？

以下はテストで試したものです：

浅いコピーのセットアップ

_function setup() {
  const someFn = sinon.stub();

  const component = shallow(
    <ListItem
      onClick={() => {
        someFn();
      }}
    />
  );

  return {
    component: component,
    actions: someFn,
    link: component.find('a'),
    listItem: component.find('li'),
  }
}
_

そしてテスト

_  it('simulates click events', () => {
    const { link, actions } = setup();
    link.simulate('click'); //Click on <a href>
    expect(actions).to.have.property('callCount', 1); //would be good if we'll remove e.preventDefault()
  });
_

テストの出力エラー：

_TypeError: Cannot read property 'preventDefault' of undefined
_
unit-testingreactjsmochasinonenzyme
27
Sergei Panfilov

これを試して

link.simulate('click', {
  preventDefault: () => {
  }
 });
70
WitVault
 test('simulates click events', () => {
    const e = { stopPropagation: jest.fn() };
    const component = shallow(<ListItem{...props} />);
    const li = component.find('li').at(0).childAt(0)
    li.props().onClick(e)

    expect();
  });
4
Anton Karpenko

これは、shallow酵素レンダラーを使用する場合にのみ問題になることに注意してください。完全なDOMレンダラーmountの場合、イベントオブジェクトにはpreventDefaultメソッドが含まれるため、モックする必要はありません。

3
Matus Dubrava

Jestと@testing-libraryまたはreact-testing-librarys fireEventを使用している場合は、初期化されたイベントオブジェクトを提供する必要があります。そうでない場合、イベントをエレメント経由でディスパッチできません。

その後、プロパティをその初期化されたイベントに割り当てることにより、e.preventDefaultが呼び出されることをアサートできます。

test('prevents default on click', () => {
  const {getByText} = render(<MyComponent />);
  const button = getByText(/click me/);

  // initialise an event, and assign your own preventDefault
  const clickEvent = new MouseEvent('click');
  Object.assign(clickEvent, {preventDefault: jest.fn()});

  fireEvent(button, clickEvent);

  expect(event.preventDefault).toHaveBeenCalledTimes(1);
});

stopPropagationについても同様です。

アントン・カルペンコの答え Jestは役に立ちました。

3
Larry

Jest.fn（）に基づいて新しいオブジェクトを作成することをお勧めします

const event = Object.assign(jest.fn(), {preventDefault: () => {}})

それを使用します：

element.simulate('click', event);
1
VonAxt

モックする機能に関してオブジェクトを定義できますいくつかのテストツールを使用して、たとえばJestおよびEnzyme

describe('Form component', () => {
  test('deos not reload page after submition', () => {
    const wrapper = shallow(<TodosForm />)
    // an object with some function
    const event = { preventDefault: () => {} }
    // mocks for this function
    jest.spyOn(event, 'preventDefault')
    wrapper.find('form').simulate('submit', event)
    // how would you know that function is called
    expect(event.preventDefault).toBeCalled()
  })
})
1
Purkhalo Alex