Let's say I have this functional React component.
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
Now I want to unit test that SomeComponent calls onShow the first time it is rendered.
Is that possible using enzyme?
I have tried implementing two very similar tests, the difference being that the first is using enzyme, the other one using react-testing-library.
The test that uses react-testing-library passes, but the enzyme test fails, even though they test the same code.
Example:
import * as reactTestingLibrary from "react-testing-library";
import * as React from "react";
import * as enzyme from "enzyme";
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
describe("Testing useEffect with enzyme", () => {
it("calls the side effect", async () => {
const aFn = jest.fn();
enzyme.mount(<SomeComponent onShow={aFn} />);
expect(aFn).toHaveBeenCalledTimes(1); // this test fails
});
});
describe("Testing useEffect with react-testing-library", () => {
it("calls the side effect", async () => {
const aFn = jest.fn();
reactTestingLibrary.render(<SomeComponent onShow={aFn} />);
expect(aFn).toHaveBeenCalledTimes(1); // this test passes
});
});
Is there a way to make enzyme execute the hook and pass the test?
Yes, it is possible to test components that uses hooks, using enzyme.
Upgrading enzyme-adapter-react-16 to latest version (1.12.1) fixed the problem.
i just upgraded my enzyme-adapter-react-16 to v1.12.1, that sorted it out for me.
Related
Hi I have a simple component I need to test:
MyComponent.js-----
import React from 'react';
const MyComponent = (props) => {
onClickHandler = () => {
console.log('clicked');
props.outsideClickHandler();
}
return (
<div>
<span className='some-button' onClick={onClickHandler}></span>
</div>
);
}
MyComponent.test.js----
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
const onClickHandler = jest.fn();
it('calls click event', () => {
const wrapper = shallow(<MyComponent />);
wrapper.find('.some-button').simulate('click');
expect(onClickHandler.mock.calls.length).toEqual(1); // tried this first
expect(onClickHandler).toBeCalled(); // tried this next
});
});
Tried above two types of expect, my console log value is coming
console.log('clicked'); comes
but my test fails and I get this:
expect(received).toEqual(expected) // deep equality
Expected: 1
Received: 0
So, the problem with your code is when you simulate a click event, you expect a totally independent mock function to be called. You need to attach the mock function to the component. The best way is using prototype. Like this:
it('calls click event', () => {
MyComponent.prototype.onClickHandler = onClickHandler; // <-- add this line
const wrapper = shallow(<MyComponent />);
wrapper.find('.some-button').simulate('click');
expect(onClickHandler.mock.calls.length).toEqual(1);
expect(onClickHandler).toBeCalled();
expect(onClickHandler).toHaveBeenCalledTimes(1); // <-- try this as well
});
Refer to this issue for more potential solutions.
I'm fairly new to React, so please forgive my ignorance. I have a component:
const Login: FunctionComponent = () => {
const history = useHistory();
//extra logic that probably not necessary at the moment
return (
<div>
<form action="">
...form stuff
</form>
</div>
)
}
When attempting to write jest/enzyme test, the one test case I've written is failing with the following error
` › encountered a declaration exception
TypeError: Cannot read property 'history' of undefined`
I've tried to use jest to mock useHistory like so:
jest.mock('react-router-dom', () => ({
useHistory: () => ({ push: jest.fn() })
}));
but this does nothing :( and I get the same error. Any help would be most appreciated
UPDATE:
So I figured it out. I was on the right path creating a mock for the useHistory() hook, I defined in the wrong place. Turns the mock needs to be define (at least for useHistory) outside of the scope of the test methods, ex:
import { shallow } from 'enzyme';
import React from 'react';
import Login from './app/componets/login.component';
jest.mock('react-router', () => ({
...jest.requireActual('react-router'),
useHistory: () => ({ push: jest.fn() })
}));
/**
* Test suite describing Login test
describe('<LoginPage>', () => {
test('should test something', () => {
//expect things to happen
});
})
With the above test runs without failing on history being undefined.
So I figured it out. I was on the right path by creating a mock for the useHistory() hook, I just defined it in the wrong place. Turns out the mock needs to be define (at least for useHistory) outside of the scope of the test methods, ex:
import { shallow } from 'enzyme';
import React from 'react';
import Login from './app/componets/login.component';
jest.mock('react-router', () => ({
...jest.requireActual('react-router'),
useHistory: () => ({ push: jest.fn() })
}));
/**
* Test suite describing Login test
*/
describe('<LoginPage>', () => {
test('should test something', () => {
//expect things to happen
});
})
With the above, the test runs without failing on history being undefined.
// MyComponent.jsx
const MyComponent = (props) => {
const { fetchSomeData } = props;
useEffect(()=> {
fetchSomeData();
}, []);
return (
// Some other components here
)
};
// MyComponent.react.test.jsx
...
describe('MyComponent', () => {
test('useEffect', () => {
const props = {
fetchSomeData: jest.fn(),
};
const wrapper = shallow(<MyComponent {...props} />);
// THIS DOES NOT WORK, HOW CAN I FIX IT?
expect(props.fetchSomeData).toHaveBeenCalled();
});
});
When running the tests I get:
expect(jest.fn()).toHaveBeenCalled()
Expected mock function to have been called, but it was not called.
The expect fails because shallow does not call useEffect. I cannot use mount because of other issues, need to find a way to make it work using shallow.
useEffect is not supported by Enzyme's shallow rendering. It is on the roadmap (see column 'v16.8+: Hooks') to be fixed for the next version of Enzyme, as mentioned by ljharb
What you're asking is not possible with the current setup. However, a lot of people are struggling with this.
I've solved / worked around this by:
not using shallow rendering from Enzyme anymore
use the React Testing Library instead of Enzyme
mocking out modules via Jest
Here's a summary on how to mock modules, based on Mock Modules from the React docs.
contact.js
import React from "react";
import Map from "./map";
function Contact(props) {
return (
<div>
<p>
Contact us via foo#bar.com
</p>
<Map center={props.center} />
</div>
);
}
contact.test.js
import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import Contact from "./contact";
import MockedMap from "./map";
jest.mock("./map", () => {
return function DummyMap(props) {
return (
<p>A dummy map.</p>
);
};
});
it("should render contact information", () => {
const center = { lat: 0, long: 0 };
act(() => {
render(
<Contact
name="Joni Baez"
email="test#example.com"
site="http://test.com"
center={center}
/>,
container
);
});
});
Useful resources:
React Testing Library docs - mocking
React docs - Mocking Modules
Here's a solution from a colleague of mine at CarbonFive:
https://blog.carbonfive.com/2019/08/05/shallow-testing-hooks-with-enzyme/
TL;DR: jest.spyOn(React, 'useEffect').mockImplementation(f => f())
shallow doesn't run effect hooks in React by default (it works in mount though) but you could use jest-react-hooks-shallow to enable the useEffect and useLayoutEffect hooks while shallow mounting in enzyme.
Then testing is pretty straightforward and even your test specs will pass.
Here is a link to a article where testing the use-effect hook has been clearly tackled with shallow mounting in enzyme
https://medium.com/geekculture/testing-useeffect-and-redux-hooks-using-enzyme-4539ae3cb545
So basically with jest-react-hooks-shallow for a component like
const ComponentWithHooks = () => {
const [text, setText] = useState<>();
const [buttonClicked, setButtonClicked] = useState<boolean>(false);
useEffect(() => setText(
`Button clicked: ${buttonClicked.toString()}`),
[buttonClicked]
);
return (
<div>
<div>{text}</div>
<button onClick={() => setButtonClicked(true)}>Click me</button>
</div>
);
};
you'd write tests like
test('Renders default message and updates it on clicking a button', () => {
const component = shallow(<App />);
expect(component.text()).toContain('Button clicked: false');
component.find('button').simulate('click');
expect(component.text()).toContain('Button clicked: true');
});
I'm following this advice and using mount() instead of shallow(). Obviously, that comes with a performance penalty, so mocking of children is advised.
Using React, enzyme and jest, How can I get code coverage on my closeDrawer() callback prop inside useEffect()
import React, {useEffect} from 'react';
import {Button} from './button';
const DrawerClose = ({closeDrawer}) => {
useEffect(() => {
const handleEsc = (e: any) => {
if (e.key === 'Escape') {
closeDrawer();
}
};
window.addEventListener('keyup', handleEsc);
return () => window.removeEventListener('keyup', handleEsc);
});
return (
<Button>
close
</Button>
);
};
export {DrawerClose};
Test:
import React from 'react';
import {DrawerClose as Block} from './drawer-close';
describe(`${Block.name}`, () => {
it('should have drawer open', () => {
const wrapper = shallow(<Block closeDrawer={() => 'closed'} />);
expect(wrapper).toMatchSnapshot(); // will not hit the useEffect
});
});
shallow() does not call useEffect yet. It's known issue #2086 and happens because of React's shallow renderer.
You can either use mount() and render completely or mock every/some nested component and still use mount() but having results more like shallow() could. Something like:
jest.mock('../../Button.jsx', (props) => <span {...props} />);
As for testing itself you need to ensure that closeDrawer will be called on hitting ESC. So we need to use spy and simulate simulate hitting ESC
const closeDrawerSpy = jest.fn();
const wrapper = mount(<Block closeDrawer={closeDrawerSpy} />);
// simulate ESC pressing
As for simulating ESC pressed on window, I'm not sure if jest-dom allows, you may try(taken from Simulate keydown on document for JEST unit testing)
var event = new KeyboardEvent('keyup', {'keyCode': 27});
window.dispatchEvent(event);
If that does not work(window.dispatchEvent is not a function or something alike) you always can mock addEventListener to have direct access to handlers.
So I have a generic class component:
import React, { Component } from "react";
export default class CompTest extends Component {
someFunc() {}
componentDidMount() {
this.someFunc();
}
render() {
return <div>Hey</div>;
}
}
and I want to check that someFunc gets called at least once (inside componentDidMount)
describe("<CompTest /> componendDidMount", () => {
it("should call someFun()", () => {
const wrapper = shallow(<CompTest />);
const instance = instance();
jest.spyOn(instance, "someFun");
expect(instance.someFunc).toHaveBeenCalledTimes(1);
});
});
however I am getting:
Expected mock function to have been called one time, but it was called zero times.
According to enzyme v3 docs: As of Enzyme v3, the shallow API does call React lifecycle methods such as componentDidMount and componentDidUpdate.
What is wrong with my test? Thanks.
(enzyme maintainer here)
The issue is that you're spying on the someFunc method after the original has already been passed into the render tree. Try this:
describe("<CompTest /> componendDidMount", () => {
it("should call someFun()", () => {
jest.spyOn(CompTest.prototype, 'someFunc');
const wrapper = shallow(<CompTest />);
expect(wrapper.instance().someFunc).toHaveBeenCalledTimes(1);
});
});