I want to test that when calling a method from a React component it trigger a function pass to the component as a props.
The method is something like this:
customMethod() {
// Do something
this.props.trackEvent({
category: 'eventCategory',
action: 'eventAction',
label: 'eventAction',
});
// Do something else
}
The method can be called from different ways, so I want just to make a generic test: if customMethod is called, should trigger this.props.trackEvent with data.
Is there a way to trigger a method call using jest and/or enzyme? I've read about doing something like this:
const wrapper = shallow(<AdPage {...baseProps} />);
wrapper.instance().customMethod();
But it is not working… any ideas.
I'm pretty new in the testing, so maybe should I use a different approach to this kind of tests?
Assuming your customMethod is a component method, I would test it like this:
(1) Fake your trackEvent prop as a jest.fn() when you create the wrapper.
(2) Call your customMethod using wrapper.instance().customMethod();
(3) Ensure props.trackEvent to haveBeenCalledWith the argument you mentioned.
As an example:
test('customMethod should call trackEvent with the correct argument', () => {
const baseProps = {
// whatever fake props you want passed to the component
// ...
trackEvent: jest.fn(),
};
const wrapper = shallow(<AdPage {...baseProps} />);
wrapper.instance().customMethod();
expect(baseProps.trackEvent).toHaveBeenCalledTimes(1);
expect(baseProps.trackEvent).toHaveBeenCalledWith({
category: 'eventCategory',
action: 'eventAction',
label: 'eventAction',
});
});
Related
My test case goes like this:
describe('Personal Profile', () => {
it('renders', () => {
const wrapper = mount(
<PersonalProfile store={store}/>
);
const spy = jest.spyOn(wrapper.instance(), 'handleChangetype')
wrapper.update();
wrapper.find(Typeahead).at(2).simulate('change');
console.log(wrapper.find(Typeahead).at(2).simulate('change').debug())
expect(spy).toHaveBeenCalled();
});
});
I am getting the above error while running the test case.
In my js file, I have not used arrow functions and bound the method in the constructor though I m having this error.
can anybody help?
I am able to figure it out. the problem was that I used redux store and it was trying to find the method in the connect component. So what I needed to do is to call .first().shallow() on my wrapper to get the component I want.
const wrapper = shallow(
<PersonalProfile store={store}/>
).first().shallow().first().shallow();
Did this as I have two HOCs so get the desired component I have to shallow the first component of previous return twice.
I am learning jest and I am trying to test my click events. My function that I am trying to test is private within the component.
I have tried using the spyOn() method.
This is the component calling the function
<NavbarToggler onClick={this.toggleNavbar} />
This is the function
private toggleNavbar = (): void => {
this.setState({
isOpen: !this.state.isOpen
});
}
This is the test
it('toggleNavbar is called when NavbarToggler is clicked', () => {
const wrapper = shallow(<NavBar />);
const instance = wrapper.instance();
jest.spyOn(instance, 'toggleNavbar');
wrapper.find(NavbarToggler).simulate('click');
expect(instance.toggleNavbar).toEqual(true);
});
I am currently getting an error on jest.spyOn saying toggleNavbar is not assignable to parameter
More often than not you shouldn't need to do that as you'd be testing implementation detail of a component - it'd make your test fragile. If your private method sets a state, then the state most likely changes the output of what component renders. You should assert that after it's triggered (via a click for example), the output of render function contains that change.
Assuming you're using enzyme
// expect(wrapper.find(Navbar)).not.toExist(); // enzyme-matchers provides `toExists()`
wrapper.find(NavbarToggler).simulate('click');
expect(wrapper.find(Navbar)).toExist(); // enzyme-matchers provides `toExists()`
To answer your question - if you're using enzyme you can inspect component's state. Another super dirty solution would be instance.toggleNavbar = jest.fn(), though as said before, you should never need to do that.
I have a stateless component:
export default function TripReportFooter(props) {
const { tripReport, user, toggleFavorite, navigation } = props;
handleShare = async slug => {
try {
const result = await Share.share({
message: `Check out this Trip Report:\n/p/${slug}/`
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
}
} catch (error) {
alert(error.message);
}
};
handleFavorite = async id => {
const token = await AsyncStorage.getItem("token");
toggleFavorite(id, token);
};
return (
... // handleFavorite and handleShare called with TouchableOpacities.
);
}
It has two functions inside, handleShare and handleFavorite. I want to test these functions are called, and also that handleFavorite calls the prop function toggle favorite.
I tried wrapper.instance().handleFavorite(), but since it is a stateless component, it returns null.
Next someone on Stack Overflow suggested using a spy like so:
wrapper = shallow(<TripReportFooter {...props} handleFavorite={press} />);
wrapper
.find("TouchableOpacity")
.at(0)
.simulate("press");
expect(press.called).to.equal(true);
but this returned
'TypeError: Cannot read property 'equal' of undefined'.
What's the proper way to call these functions?
You first need to think about what you want to test. Is it implementation details or the interaction with your component? The latter is a much better mindset and standpoint so what I would do is to test the component from the interaction point of view.
I would (for handleShare):
Mock the Share object methods that are being called inside the share function;
Select the button I want to click/touch
Click/touch the button
Assert that the methods were called.
Now for the handleFavorite:
Mock AsyncStorage.getItem;
Create a fake toggleFavorite function that I would pass as props;
Select the button I want to click/touch
Click/touch the button
Assert my toggleFavorite function has been called
If you want to test these functions individually you would have to extract them to the outside of the component and test them individually. But I would not advise this as it is not clean and extra work.
Hope it helps!
Functions within a functional component aren't defined on the prototype or the functional component instance, you cannot directly spy on them
The solution here is to test out the internal implementation of the individual functions
For instance for handleFavourite function you can mock AsynStorage and pass on a mock function for toggleFavourite and then asset it its called on TouchableOpacity onPress simulation
You can check how to mock AsyncStore in this post:
How to test Async Storage with Jest?
const mocktToggleFavourite = jest.fn();
wrapper = shallow(<TripReportFooter {...props} toggleFavourite={mocktToggleFavourite} />);
wrapper
.find("TouchableOpacity")
.at(0)
.simulate("press");
expect(mockToggleFavourite).toHaveBeenCalled();
Similarly you can test the individual functionalities within handleShare by first mocking Share.share and then checking against each condition.For instance you can add an spy on window.alert and see if that is called
const windowSpy = jest.spyOn(window, 'alert');
wrapper = shallow(<TripReportFooter {...props} toggleFavourite={mocktToggleFavourite} />);
//Simulate event that calls handleShare
// Mock Share to give required result
expect(windowSpy).toBeCalledWith(expectedValue);
I have this component test
const component = mount(<MemoryRouter><Login/></MemoryRouter>);
const emailField = component.find('input[type="email"]');
const passwordField = component.find('input[type="password"]');
const mockedSubmitFunction=jest.fn();
component.find(Login).instance().onSubmit=mockedSubmitFunction;
emailField.simulate('change', { target: { value: testEmail } });
passwordField.simulate('change', { target: { value: testPassword } });
component.find('form').simulate('submit');
expect(mockedSubmitFunction).toBeCalled();
and in the component i have
in constructor :-
this.onSubmit = this.onSubmit.bind(this);
and the eventhandler
onSubmit(event) {
event.preventDefault();
when i put a breakpoint in onSubmit it is coming to the component function after executing the mocked onSubmit, why is this happening.
I assumed it will only call the mocked onSubmit.
What am I doing differently?
CodeSandbox :https://codesandbox.io/s/q95lv7vlrw
But the sandbox is showing Could not find module in path: 'object-inspect/util.inspect' relative to '/node_modules/object-inspect/index.js' for some reason, which is unrelated i guess
So you got function mocked, but actual onSubmit is called. Instead if you want to call only mocked fn you have to provide it (as a prop in your test spec for example).
const mockedSubmitFunction = jest.fn(event => {
console.log("Mocked function");
});
const component = mount(
<MemoryRouter>
<Login login={mockedSubmitFunction} />
</MemoryRouter>
);
I updated sandbox for you.
You can additionally check this explained example on form testing.
Update: i suppose that the actual problem OP has was that mock function was firing, but it was copied to instance, thus expect...toBeCalled() fails (actual mockedFn was not called). You can avoid these problems by passing mocked function as a prop, spying on a function, etc.
I have a reactjs component that has a method doSomething:
doSomething()
{
this.setState({
checked: !this.state.checked
}, function () {
if (this.state.checked) {
store.dispatch({type: 'SOMEACTION', data: true});
}
});
}
What would the chai/mocha unittest look like for this method/component? How can I test a dispatch has called?
Replace the dispatch with a spy and check that is was called with the correct arguments.
You can test that your action correctly dispatched to reducers correctly in another unit test somewhere using redux-mock-store.
You can also use redux-mock-store to mock the store here.
Although why are you calling dispatch on the store directly? You usually want to just call it on the props like so: this.props.dispatch() as dispatch gets passed automatically when you use mapStateToProps. This would mean you could just pass a spy down as a prop instead and not have to mock out the entire store.
You could use expect, for instance use spy to ensure the method is called as well as assert that state has changed.
// spy on the method to assert that it has been called
const doSomething = expect.spyOn(ExampleComponent, 'doSomething');
// simulate some behaviour
...
// assert method called
expect(doSomething).totHaveBeenCalled();
// assert state changed
assert.equal(store.getState()..., ...)
Also, you can split this into multiple tests.