New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

window.addEventListener not triggered by simulated events #426

Closed
timoxley opened this Issue May 28, 2016 · 18 comments

Comments

@timoxley
Copy link

timoxley commented May 28, 2016

The first component I tried to test using this was a mixin for detecting clicks outside a component. In order to do this one needs to listen with window.addEventListener('click'). This handler doesn't appear to be triggered when using enzyme simulated clicks.

If handling this is out of scope for enzyme, do you have a recommendation on the best way to get this under test?

@timoxley

This comment has been minimized.

Copy link
Author

timoxley commented May 28, 2016

Ahh, so mount doesn't actually attach the rendered fragment to the document, so even if simulated events did bubble up through the concrete DOM, they wouldn't reach window anyway.

I found a workaround:

  • Attach the mounted component to document.body
  • Use simulant to fire "real" DOM events.

e.g.

  it('only triggers clickOutside handler when clicking outside component', t => {
    const onClickOutside = sinon.spy()
    mount(<Page onClickOutside={onClickOutside} />, { attachTo: document.body })
    simulant.fire(document.body.querySelector('aside'), 'click')
    t.equal(onClickOutside.callCount, 1, 'should fire when clicking menu sibling')
    document.body.innerHTML = ''
    t.end()
  })

However, I've just noticed that in this particular example enzyme isn't actually doing anything haha.

We can just ReactDOM.render into our JSDOM document.body directly:

  it('only triggers clickOutside handler when clicking outside component', t => {
    const onClickOutside = sinon.spy()
    ReactDOM.render(<Page onClickOutside={onClickOutside} />, document.body)
    simulant.fire(document.body.querySelector('aside'), 'click')
    t.equal(onClickOutside.callCount, 1, 'should fire when clicking menu sibling')
    document.body.innerHTML = ''
    t.end()
  })

Curious now as to why not use just always use this method? why enzyme?

@tleunen

This comment has been minimized.

Copy link

tleunen commented Jun 14, 2016

Can a core contributor respond to this?
I'm having the same issue now where instead of attaching a event on a direct element, I'm attaching it on the document so that I can easily detect a click outside of the said element. But I'm having hard time testing this behavior with enzyme.

@aweary @lelandrichardson

@aweary

This comment has been minimized.

Copy link
Collaborator

aweary commented Jun 14, 2016

@tleunen I doubt this is a use case we'd support, enzyme is meant to test React components and attaching an event listener to the document with addEventListener means the event is not being handled by React's synthetic event system. Our simulate method for mount is a thin wrapper around ReactTestUtils.Simulate, which only deals with React's synthetic event system.

I can't speak to your specific use case, but I would advise that this is generally an anti-pattern in React and should be handled within React's event system when possible (such as passing down an onClick prop from a stateful parent and calling it in the leaf component's onClick handler). You can try workaround like @timoxley but your mileage may vary.

@aweary aweary closed this Jun 14, 2016

@tleunen

This comment has been minimized.

Copy link

tleunen commented Jun 14, 2016

So you would attach an onClick on the main root component, and then passing it to all components? Maybe using the context then?

@aweary

This comment has been minimized.

Copy link
Collaborator

aweary commented Jun 14, 2016

That may be a good use case for context if you need to monitor click events within arbitrarily nested components.

@rpmonteiro

This comment has been minimized.

Copy link

rpmonteiro commented Jun 25, 2016

@aweary , would you mind giving a bit more information about how to tackle those window/body event listeners using context? I've been searching endlessly as to how's the best way of doing it and I don't have an answer yet.

I'm having exactly the same problem as @timoxley , but with a KeyPress event... It's proving to be extremely frustrating to test.

Thank you

@aweary

This comment has been minimized.

Copy link
Collaborator

aweary commented Jun 25, 2016

@rpmonteiro if you were using context you wouldn't be using the native event system, you would have on onKeyPress method on your top-level component that you make available via context to child components. I'm not sure if this is the best idea, and I haven't tried it. With that disclaimer, it might look something like:

class App extends React.Component {
  getChildContext() {
    onKeyPress: this.onKeyPress
  }

  onKeyPress(event) {
  // handle event here
  }
}

Then in some child component

class SomeChildComponentOfApp extends React.Component {
   static contextTypes = {
     // the onKeyPress function is now available via `this.context.onKeyPress`
     onKeyPress: React.PropTypes.func
   }
}

If you absolutely must use the native event system, you might look into another library for mocking addEventListener and the related functions.

@blainekasten

This comment has been minimized.

Copy link
Contributor

blainekasten commented Jun 26, 2016

Generally any test framework(jest, mocha, etc) can solve your problem natively. Your goal here is effectively to make sure the event is bound, and that when its fired something happens in your component. So you'll have to do some setup prior to rendering, but it is definitely possible to test this code without using context.

To be clear, @aweary is spot on in saying this is not enzyme supported.

For example in jest this is a sort of code you could use.

const map = {};
Window.addEventListener = jest.genMockFn().mockImpl((event, cb) => {
  map[event] = cb;
});

// render component

map.event(...args);

// assert changes
@victorhqc

This comment has been minimized.

Copy link

victorhqc commented Oct 13, 2016

@blainekasten you saved my day :)

const map = {};
window.addEventListener = jest.genMockFn().mockImpl((event, cb) => {
  map[event] = cb;
});

const component = mount(<SomeComponent />);
map.mousemove({ pageX: 100, pageY: 100});

This worked for me, the state of the component is successfully being updated.

@kellyrmilligan

This comment has been minimized.

Copy link

kellyrmilligan commented Apr 21, 2017

just as a small update and FYI, for document this is working for me, and on a newer version of jest:

const map = {};
    document.addEventListener = jest.fn((event, cb) => {
      map[event] = cb;
    })
@LVCarnevalli

This comment has been minimized.

Copy link

LVCarnevalli commented Jul 14, 2017

Component:


componentDidMount() {   
 ReactDOM.findDOMNode(this.datePicker.refs.input).addEventListener("change", (event) => {
    const value = event.target.value;
    this.handleChange(Moment(value).toISOString(), value);
  });
}

Test:


it('change empty value date picker', () => {
    const app = ReactTestUtils.renderIntoDocument(<Datepicker />);
    const datePicker = ReactDOM.findDOMNode(app.datePicker.refs.input);
    const value = "";

    const event = new Event("change");
    datePicker.value = value;
    datePicker.dispatchEvent(event);

    expect(app.state.formattedValue).toEqual(value);
});
@prasadmsvs

This comment has been minimized.

Copy link

prasadmsvs commented Feb 1, 2018

I'm sorry I am a newbie to react and jest. I didn't understand what is happening here

const map = {};
window.addEventListener = jest.genMockFn().mockImpl((event, cb) => {
  map[event] = cb; // what is cb here?
});

const component = mount(<SomeComponent />);
map.mousemove({ pageX: 100, pageY: 100}); // what is map here?

How did it effect component behaviour?
@ljharb

This comment has been minimized.

Copy link
Member

ljharb commented Feb 2, 2018

@prasadmsvs please file a new issue rather than commenting on a new one; but for this kind of question, the gitter channel linked in the readme is preferred.

@vedraan

This comment has been minimized.

Copy link

vedraan commented Aug 17, 2018

Inspired by @kellyrmilligan's solution here's full implementation I use to detect ESC keydown (also useful for any other event type):

it('calls the dismiss callback on ESC key', () => {
  const KEYBOARD_ESCAPE_CODE = 27;
  const mockDismissCallback = jest.fn();

  // Declaring keydown prop so the linter doesn't compain
  const eventMap = {
    keydown: null,
  };

  document.addEventListener = jest.fn((event, cb) => {
    eventMap[event] = cb;
  });

  // MyModalComponent internally uses
  // document.addEventListener('keydown', this.onModalDialogKeyDown, false);
  // which then via onModalDialogKeyDown binding does some stuff and then calls onDismiss which
  // is really mockDismissCallback
  const modal = shallow(
    <MyModalComponent isOpen={true} onDismiss={mockDismissCallback}>
      Test
    </MyModalComponent>
  );

  eventMap.keydown({ keyCode: KEYBOARD_ESCAPE_CODE });

  expect(mockDismissCallback.mock.calls.length).toEqual(1);
});

@blandine blandine referenced this issue Aug 31, 2018

Merged

add onChanged prop on Slider (#6108) #6127

2 of 2 tasks complete
@awreese

This comment has been minimized.

Copy link

awreese commented Sep 5, 2018

Testing a React app I had to simulate a string of text input, arrived at this solution using sinon:

const sandbox = sinon.createSandbox();

let handlers = [];
const fakeAddListener = (type, handler) => handlers.push(handler);
const dispatchKeypress = (e) => handlers.forEach(h => {h(e)});

// My handlers only examine the `which` property, but construct event with the properties you need
const createKeypressEvent = (c) => ({ which: c.charCodeAt(0) });

const simulateKeyStrokes = (textString) => [...textString].forEach(c => dispatchKeypressEvent(createKeypressEvent(c)));

beforeEach(() => {
    handlers = [];
    sandbox.stub(document, 'addEventListener').callsFake(fakeAddListener);
});

afterEach(() => {
   sandbox.restore();
});

it('simulates a bunch of key strokes', () => {
    // instantiate react component test object here that attaches listeners
    // setup any stubs/spies

    simulateKeyStrokes('abcdefghijklmnopqrstuvwxyz');

    // handle assertions/expects
});
@Faline10

This comment has been minimized.

Copy link

Faline10 commented Oct 18, 2018

This also works without having to mock window.addEventListener, due to all the reasons mentioned above. Test framework: jest + enzyme.

    test('should close when user clicks outside it', () => {
        const outerNode = document.createElement('div');
        document.body.appendChild(outerNode);
        
        const onClose = jest.fn();
        const wrapper = mount(<Toast onClose={ onClose } />, { attachTo: outerNode });
        const toast = wrapper.find(`[data-test-id="toast"]`); // getDOMNode() could also work

        toast.instance().dispatchEvent(new Event('click'));
        expect(onClose).not.toHaveBeenCalled();

        outerNode.dispatchEvent(new Event('click'));
        expect(onClose).toHaveBeenCalled();
    });

A little further explanation: wrapper.find().instance() returns a DOM element (whereas wrapper.instance() would just return the Toast class)--this gives us access to EventTarget.dispatchEvent(), which you can use to dispatch non-synthetic events, rather than mocking out window.addEventListener.
And by adding another div to the document.body, then attaching the mounted wrapper, you ensure the real element event will bubble up to the actual window. (Assumption is that you have a click listener on the window.) Note that I also tried attaching directly to the document.body, as in the first comment, but React then throws "Rendering components directly into document.body is discouraged."

@markmcdermid

This comment has been minimized.

Copy link

markmcdermid commented Jan 14, 2019

@Faline10, that's awesome! As a note to others, I had to do .dispatchEvent(new Event('click', { bubbles: true})) to make it bubble to the window

@riyaz4s

This comment has been minimized.

Copy link

riyaz4s commented Jan 25, 2019

@Faline10, that's awesome! As a note to others, I had to do .dispatchEvent(new Event('click', { bubbles: true})) to make it bubble to the window

ev = new Event('click');

I am getting Event is undefined.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment