Test callback prop with Enzyme

Question

I have React-Spring animation in my component:

<SpinnerKf state={status} onRest={changeView && status === 'SUCCESS' ? () => changeView(VIEW_MODES.RECEIPT) : null}>
    ....
</SpinnerKf>

Where I pass function call inside onRest prop - this is the prop from React-Spring Keyframe, which is called after animation end.

How can I cover this with a test? I'm opened for any tricks, just need to avoid complaining in test coverage.

score 0 · Answer 1 · answered Apr 12 '19 at 18:58

0

You can use Enzyme to get the SpinnerKf component and then call its onRest property directly.

Here is a simplified example:

code.js

import * as React from 'react';

const SpinnerKf = () => null;

export const Component = () => (<SpinnerKf onRest={() => { return 'does something'; }}/>);

code.test.js

import * as React from 'react';
import { shallow } from 'enzyme';

import { Component } from './code';

test('callback', () => {
  const wrapper = shallow(<Component />);
  const result = wrapper.find('SpinnerKf').props().onRest();
  expect(result).toBe('does something');  // Success!
});

Note that testing the return value or behavior of the callback is optional, as long as it runs during a unit test it will be included in the code coverage report.

answered Apr 12 '19 at 18:58

Brian Adams

43,011
9
113
111

For your component you'll need to render it once where `onRest` gets set to `null` and **not** call it, and once where `changeView` is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and `status` is set to `'SUCCESS'` so `onRest` gets set to your [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and call it @VladimirHumeniuk – Brian Adams Apr 15 '19 at 21:01
Thanks for the link to arrow functions documentation, captain, but your answer doesn't work in many way: you can't find `SpinnerKf` inside shallow wrapper, you can't call prop in way like `.props().onRest()`, and in my code I didn't pass function as anonymous call, and it doesn't return anything. – Volodymyr Humeniuk Apr 16 '19 at 10:12
It works...I almost never post code I haven't already tested. You absolutely **can** [`find`](https://airbnb.io/enzyme/docs/api/ShallowWrapper/find.html) an element within a shallow wrapper [by its display name](https://airbnb.io/enzyme/docs/api/selector.html#3-a-react-components-displayname). You absolutely **can** call [`props`](https://airbnb.io/enzyme/docs/api/ShallowWrapper/props.html) and directly call a property on the returned object... @VladimirHumeniuk – Brian Adams Apr 16 '19 at 19:43
...and an arrow functions with a "concise body" [implicitly returns the result of its expression body](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body) so if `changeView` returns anything (like, say a `Promise` if it is an `async` function), you can use that return value during your test. (which again, is optional as I mentioned since you are only looking for code coverage)... @VladimirHumeniuk – Brian Adams Apr 16 '19 at 19:44
...so yes, **the code in my answer works**. As I mentioned, it's a simplified example based on the short code snippet in your question. If you update your question with more of your code I'm happy to update my answer to be more specific to your code @VladimirHumeniuk – Brian Adams Apr 16 '19 at 20:30

Test callback prop with Enzyme

1 Answers1