javascript - How can I test a debounce function with JestEnzyme? - Stack Overflow

admin管理员组

文章数量:1025202

I have this ponent where test coverage says I need to test lines 24 and 25:

class TableToolbarComp extends Component {
  state = {
    shipmentId: '',
  };

  debouncedSetFilters = debounce(() => {
    const { applyFilters } = this.props; // LINE 24
    applyFilters(this.state);            // LINE 25
  }, 750);

  updateShipmentId = ev => {
    this.setState(
      {
        shipmentId: ev.target.value,
      },
      this.debouncedSetFilters,
    );
  };

  render() {...}
}

And the test:

  beforeEach(() => {
    applyFilters: k => k,
  });

...

  it('should trigger button click', () => {
    const wrapper = shallow(<TableToolbarComp {...props} />);

    wrapper.instance().debouncedSetFilters(750);
    wrapper.instance().updateShipmentId({ target: { shipmentId: '124' } });
    wrapper.instance().props.applyFilters({ shipmentId: '124' });
  });

And I am not getting any errors, it just says those 2 lines need coverage.

I already attempted to called debouncedSetFilters and applyFilters on the test but it's still returning those 2 lines as uncover.

What am I missing?

I have this ponent where test coverage says I need to test lines 24 and 25:

class TableToolbarComp extends Component {
  state = {
    shipmentId: '',
  };

  debouncedSetFilters = debounce(() => {
    const { applyFilters } = this.props; // LINE 24
    applyFilters(this.state);            // LINE 25
  }, 750);

  updateShipmentId = ev => {
    this.setState(
      {
        shipmentId: ev.target.value,
      },
      this.debouncedSetFilters,
    );
  };

  render() {...}
}

And the test:

  beforeEach(() => {
    applyFilters: k => k,
  });

...

  it('should trigger button click', () => {
    const wrapper = shallow(<TableToolbarComp {...props} />);

    wrapper.instance().debouncedSetFilters(750);
    wrapper.instance().updateShipmentId({ target: { shipmentId: '124' } });
    wrapper.instance().props.applyFilters({ shipmentId: '124' });
  });

And I am not getting any errors, it just says those 2 lines need coverage.

I already attempted to called debouncedSetFilters and applyFilters on the test but it's still returning those 2 lines as uncover.

What am I missing?

• javascript
• reactjs
• ecmascript-6
• jestjs
• enzyme

Share Improve this question Follow asked Jan 23, 2019 at 1:44 ReactingReacting 6,13788 gold badges4242 silver badges9595 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Function calls cannot be tested efficiently without spies. It should be:

  beforeEach(() => {
    applyFilters = jest.fn();
  });

In order to test asynchronous time-sensitive function, timer mocks should be applied:

jest.useFakeTimers();

const wrapper = shallow(<TableToolbarComp applyFilters={applyFilters} />);

wrapper.instance().debouncedSetFilters();
wrapper.instance().debouncedSetFilters();
expect(applyFilters).not.toHaveBeenCalled();
jest.advanceTimersByTime(750);
expect(applyFilters).toHaveBeenCalledTimes(1);

Then debouncedSetFilters can be stubbed in updateShipmentId test.

I have this ponent where test coverage says I need to test lines 24 and 25:

class TableToolbarComp extends Component {
  state = {
    shipmentId: '',
  };

  debouncedSetFilters = debounce(() => {
    const { applyFilters } = this.props; // LINE 24
    applyFilters(this.state);            // LINE 25
  }, 750);

  updateShipmentId = ev => {
    this.setState(
      {
        shipmentId: ev.target.value,
      },
      this.debouncedSetFilters,
    );
  };

  render() {...}
}

And the test:

  beforeEach(() => {
    applyFilters: k => k,
  });

...

  it('should trigger button click', () => {
    const wrapper = shallow(<TableToolbarComp {...props} />);

    wrapper.instance().debouncedSetFilters(750);
    wrapper.instance().updateShipmentId({ target: { shipmentId: '124' } });
    wrapper.instance().props.applyFilters({ shipmentId: '124' });
  });

And I am not getting any errors, it just says those 2 lines need coverage.

I already attempted to called debouncedSetFilters and applyFilters on the test but it's still returning those 2 lines as uncover.

What am I missing?

I have this ponent where test coverage says I need to test lines 24 and 25:

class TableToolbarComp extends Component {
  state = {
    shipmentId: '',
  };

  debouncedSetFilters = debounce(() => {
    const { applyFilters } = this.props; // LINE 24
    applyFilters(this.state);            // LINE 25
  }, 750);

  updateShipmentId = ev => {
    this.setState(
      {
        shipmentId: ev.target.value,
      },
      this.debouncedSetFilters,
    );
  };

  render() {...}
}

And the test:

  beforeEach(() => {
    applyFilters: k => k,
  });

...

  it('should trigger button click', () => {
    const wrapper = shallow(<TableToolbarComp {...props} />);

    wrapper.instance().debouncedSetFilters(750);
    wrapper.instance().updateShipmentId({ target: { shipmentId: '124' } });
    wrapper.instance().props.applyFilters({ shipmentId: '124' });
  });

And I am not getting any errors, it just says those 2 lines need coverage.

I already attempted to called debouncedSetFilters and applyFilters on the test but it's still returning those 2 lines as uncover.

What am I missing?

• javascript
• reactjs
• ecmascript-6
• jestjs
• enzyme

Share Improve this question Follow asked Jan 23, 2019 at 1:44 ReactingReacting 6,13788 gold badges4242 silver badges9595 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Function calls cannot be tested efficiently without spies. It should be:

  beforeEach(() => {
    applyFilters = jest.fn();
  });

In order to test asynchronous time-sensitive function, timer mocks should be applied:

jest.useFakeTimers();

const wrapper = shallow(<TableToolbarComp applyFilters={applyFilters} />);

wrapper.instance().debouncedSetFilters();
wrapper.instance().debouncedSetFilters();
expect(applyFilters).not.toHaveBeenCalled();
jest.advanceTimersByTime(750);
expect(applyFilters).toHaveBeenCalledTimes(1);

Then debouncedSetFilters can be stubbed in updateShipmentId test.

本文标签： javascriptHow can I test a debounce function with JestEnzymeStack Overflow