Wie mock e.preventDefault in reagieren Komponente Kind

Ich weiß wirklich nicht, wie mock inline-Funktion in reagieren Komponente Kind

Mein stack: sinon, chai, enzyme;

Component-Verwendung:

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

Komponente machen:

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

Hier haben wir onClick aufruft e.preventDefault(). Wie Sie sagen, für <a href>(link) nicht aufrufen e.preventDefault()? Wie kann ich spotten, dass onClick?

Unter dem, was ich habe versuchen in tests:

Flache Kopie-setup -

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'),
  }
}

Und der test

  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()
  });

Test output-error:

TypeError: Cannot read property 'preventDefault' of undefined

InformationsquelleAutor Sergei Panfilov | 2017-01-24

Versuchen, diese

link.simulate('click', {
  preventDefault: () => {
  }
 });

InformationsquelleAutor 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();
  });

InformationsquelleAutor Anton Karpenko

3

Nur der Hinweis, dass das Problem nur bei der Verwendung von shallow Enzym-renderer. Im Falle der vollständigen DOM-renderer mount das event-Objekt enthält die preventDefault Methode, daher müssen Sie nicht verspotten es.

InformationsquelleAutor Matus Dubrava
3

Für diejenigen, die sich mit Scherz und @testing-library oder react-testing-librarys fireEvent benötigen Sie eine initialisierte event-Objekt, andernfalls wird das Ereignis kann nicht ausgelöst werden, über Ihr element.

Kann man dann behaupten auf e.preventDefault genannt werden, durch zuweisen einer Eigenschaft an, die initialisiert Veranstaltung:
```
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);
});
```
Ebenso für stopPropagation.

Anton Karpenko Antwort für Scherz war nützlich.

InformationsquelleAutor Larry
1

Ich würde vorschlagen, erstellen neue Objekt basierend auf den Scherz.fn() mit
```
const event = Object.assign(jest.fn(), {preventDefault: () => {}})
```
dann verwenden Sie es:
```
element.simulate('click', event);
```
InformationsquelleAutor VonAxt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.