Enzyme: Test fails on BrowserHistory function

Question

I am fairly new to unit tests. I am using react+redux and I have created a NotFound page/component and I am writings its unit test. There's an onClick event that I need to test which is failing.

404.jsx

const GenericNotFound = () => {
  const goBack = () => {
    browserHistory.goBack();
  };
  return (
    <section >
      <h1>Sorry. The requested URL is not found</h1>
      <a onClick={goBack}>Go back</a>
    </section>
  );
};

Test.js

 const wrapper = shallow(<GenericNotFound />);
  const browserHistory = {
    goBack: sinon.spy()
  };
  const onClick = wrapper.find('a').props().onClick;
  onClick();
  expect(browserHistory.goBack).to.have.been.called;

Even with this, it throws me an error Cannot read property 'goBack' of undefined

Thank you in advance.

Have you tried as `sinon.spy(browserHistory, 'goBack')` ? Not sure abt it but give it a try — anoop, Aug 13 '16 at 22:25
Instead of using `const browserHistory = { goBack: sinon.spy() };` use it as `sinon.spy(browserHistory, 'goBack')` — anoop, Aug 13 '16 at 22:27
Nope still the same. Is it possible that this has something to do with shallow rendering not creating a full DOM? Because I believe broswerHistory needs a DOM environment? — Umair Sarfraz, Aug 13 '16 at 22:30
yes, try with `mount` instead of `shallow` and spy to modify as `sinon.spy(browserHistory.prototype, 'goBack') — anoop, Aug 13 '16 at 22:35
because it is a prototype function https://github.com/reactjs/react-router/blob/master/modules/InternalPropTypes.js#L15 — anoop, Aug 13 '16 at 22:43
I haven't checked but I had a little conversation to one of the contributors in enzyme, and he has confirmed that this would work with mount. — Umair Sarfraz, Aug 14 '16 at 10:49
@anoop I have another issue. If you could help me out in that. http://stackoverflow.com/questions/38940318/enzyme-how-to-test-onsubmit-function-passed-as-prop — Umair Sarfraz, Aug 14 '16 at 10:50

score 2 · Answer 1 · answered Aug 16 '16 at 10:21

By following @anoop answer:

 it('should render an anchor tag', () => {
      sinon.spy(browserHistory, 'goBack');
      const wrapper = mount(<GenericNotFound />;
      const onClick = wrapper.find('a').props().onClick;
      onClick();
      expect(browserHistory.goBack).to.have.been.called;
      browserHistory.goBack.restore();
    });

score 0 · Accepted Answer · answered Aug 14 '16 at 10:53

0

As updated on the comments,

some changes

Use mount instead of shallow

const mount = mount(<GenericNotFound />);

Use spy as below,

sinon.spy(browserHistory.prototype, 'goBack')

answered Aug 14 '16 at 10:53

anoop

3,229
23
35

Enzyme: Test fails on BrowserHistory function

2 Answers2