1

I found several answer (https://stackoverflow.com/a/40994010/1219368 , What is the difference between jest.mock(module) and jest.fn(), ...) as well as the docs + testing example in react-boilerplate but I still don't get how to use it in practice.

Can you provide a concrete example, explaining what happens "under the hood" and what new (jest.fn()) returns, when used to test a React component['s DOM]?

Canta
  • 1,480
  • 1
  • 13
  • 26
dragonmnl
  • 14,578
  • 33
  • 84
  • 129
  • I usually use `jest.fn()` to define mock functions that need to be inspected for the number of calls. For async action creators using redux-thunk, I usually mock the `dispatch` and look for how many types it was called and what arguments were passed to it. To test functions passed as props to components, I use `jest.fn()` to mock them and inject them as props; then I check whether they're called properly from within the component. It would be helpful if your question was more specific as to what type of thing you are trying to test? Otherwise, don't use something you don't need. – nbkhope Mar 21 '17 at 16:47
  • I want to use it like expect(mount().find('.class')) and I apparently need to mock the props of but when I try to do so I get exception from jest "failed prop type ... prop type X is undefined"). I am using jest.fn() as values for the props (Component prop1={jest.fn()} .... ) Can you answer with an example in this case? – dragonmnl Mar 21 '17 at 16:50
  • If your component requires some props, you definitely have to pass them when you mount. – nbkhope Mar 21 '17 at 16:52
  • @nbkhope I did, but they're functions indeed (passed into MapdispatchToProps in the app). but looks like jest.fn() returns undefined – dragonmnl Mar 21 '17 at 16:53
  • Make an object like `const props = { ... };` with all the necessary properties, be they strings, numbers, arrays, or object. For functions, you can create variables with mock functions: `const someFunction = jest.fn();` and then include it in your props object. Then, mount the component like ``. I recommend using `shallow` since nested components should be tested on their own, in a separate set of tests. – nbkhope Mar 21 '17 at 16:55
  • If you're using something like Redux, you can just export the component without being connected. Write `export { YourComponent };` in addition to `export default connect(...)(YourComponent)`. Then you can define whatever is necessary from mapDispatchToProps in your `props` object I mentioned above. Also make sure whatever functions are being called are actually being passed to props. I once was testing some functions and realized they're component method functions and were not passed via props. In that case, use wrapper.instance.someMethod() to call/reference them. – nbkhope Mar 21 '17 at 16:57
  • good advice. thank you! feel free to answer and I'll accept it ;) – dragonmnl Mar 21 '17 at 17:13

1 Answers1

4

I usually use jest.fn() to define mock functions that need to be inspected for the number of calls. For async action creators using redux-thunk, I usually mock the dispatch and look for how many types it was called and what arguments were passed to it. To test functions passed as props to components, I use jest.fn() to mock them and inject them as props; then I check whether they're called properly from within the component. It would be helpful if your question was more specific as to what type of thing you are trying to test? Otherwise, don't use something you don't need

If your component requires some props, you definitely have to pass them when you mount. Make an object like 

const props = { ... };

with all the necessary properties, be they strings, numbers, arrays, or object.

For functions, you can create variables with mock functions: 

const someFunction = jest.fn();

and then include it in your props object:

const props = { ..., someFunction };

Then, mount the component like <Component {...props} />. I recommend using shallow since nested components should be tested on their own, in a separate set of tests.

If you're using something like Redux, you can just export the component without being connected. Write the following, in addition to the export to the decorated component:

export default connect(...)(YourComponent);
// For testing purposes:
export { YourComponent };

Then you can define whatever is necessary from mapDispatchToProps in your props object I mentioned above. Also make sure whatever functions are being called are actually being passed to props. I once was testing some functions and realized they're component method functions and were not passed via props. In that case, use wrapper.instance.someMethod() to call/reference them.

nbkhope
  • 7,360
  • 4
  • 40
  • 58