Extend the component to allow custom debouncer for testing (sinon fakeTimers)

[kaamosfirefly]

When testing react components that use the debouncer input, it would be nice to be able to have the debouncer used by this component to use the given context. Example: when using sinon fakeTimers, the global setTimeout is replaced by a mocked one, but the setTimeout used in lodash isn't which makes testing the parents of this component difficult.

createNotifier(debounceTimeout) {
        let debounce = _.runInContext({setTimeout: setTimeout}).debounce;
        if (debounceTimeout < 0) {
            this.notify = () => null;
        } else if (debounceTimeout === 0) {
            this.notify = this.props.onChange;
        } else {
            this.notify = debounce(this.props.onChange, debounceTimeout);
        }
    },

[nkbt]

Why not proxyquire for testing?

import proxyquire from 'proxyquire';
const MyComponent = proxyquire('./myComponent', {
  'lodash.debounce': callback => callback()
});

[nkbt]

I would also recommend to do shallow rendering, so you will not render DebounceInput at all and there will not be any need for proxying or mocking debounce.

In general, testing DebounceInput is a concern of DebounceInput itself, not your application.

Closing this for now, feel free to reopen though, if you have any more questions/details around it.

Cheers!