How to test a link using Jest / Enzyme? - reactjs

Question

I have a react component like this:
<A href="/products" onClick={(e) => this.onClick(tf)}>my link</A>
There is an onClick handler attached to the link that will either execute a separate function, or allow the link to propagate and for the user to be redirected:
onClick(e, tf) {
e.stopPropagation();
if(tf){
e.preventDefault();
doSomethingElse();
}
// If execution gets here, then the link will follow through to /products
}
How do I test this using Enzyme / Jest?

Answer 1

Here is the unit test solution:
index.jsx:
import React, { Component } from 'react';
class Link extends Component {
onClick(e, tf) {
e.stopPropagation();
if (tf) {
e.preventDefault();
}
}
render() {
const { tf } = this.props;
return (
<a href="/products" onClick={(e) => this.onClick(e, tf)}>
my link
</a>
);
}
}
export default Link;
index.test.jsx:
import Link from './index';
import React from 'react';
import { shallow } from 'enzyme';
describe('46213271', () => {
it('should handle click, call stopPropagation and preventDefault', () => {
const mProps = { tf: 'tf' };
const wrapper = shallow(<Link {...mProps}></Link>);
expect(wrapper.exists()).toBeTruthy();
const mEvent = { stopPropagation: jest.fn(), preventDefault: jest.fn() };
wrapper.simulate('click', mEvent);
expect(mEvent.stopPropagation).toBeCalledTimes(1);
expect(mEvent.preventDefault).toBeCalledTimes(1);
});
it('should handle click, call stopPropagation', () => {
const mProps = { tf: '' };
const wrapper = shallow(<Link {...mProps}></Link>);
expect(wrapper.exists()).toBeTruthy();
const mEvent = { stopPropagation: jest.fn(), preventDefault: jest.fn() };
wrapper.simulate('click', mEvent);
expect(mEvent.stopPropagation).toBeCalledTimes(1);
expect(mEvent.preventDefault).not.toBeCalled();
});
});
Unit test results with 100% coverage:
PASS src/stackoverflow/46213271/index.test.jsx (17.292s)
46213271
✓ should handle click, call stopPropagation and preventDefault (13ms)
✓ should handle click, call stopPropagation (2ms)
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.jsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 19.864s
Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/46213271