Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

39

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Spying & Mocking Functions in React

Now we are going to start testing our form for whenever we submit data. We will be creating a mock function or a ‘spy’ which allows us to analyze our function and make sure everything is being called correctly.

Downloads

Become a pro to download code and videos

Comments

Angie

6 months ago

But what if the function we are trying to test on click is not passed in as a prop?

Joe

4 months ago

I have the same question, I want to improve the coverage, need to test some functions that are not passed in as PROPS, Someone told me it is not accessbile to those functions?

Peter

6 months ago

I have the same question

Alex

almost 2 years ago [edited]

for those using the latest version of react testing library

change to fireEvent.submit(getByText('Submit'))

User avatar

Jörg

over 2 years ago [edited]

Hej Scott I found a solution. But I'am not quit sure why or how it is working (-:

https://til.hashrocket.com/posts/hrhejhqg2n-turn-off-console-error-messages-in-a-test

User avatar

Jörg

over 2 years ago [edited]

Where are all the answers to the questions ? I have the same problem as Ariel. Can you please help me with that. Thanks

● Console

console.log src/test/MovieForm.test.js:7
  hi
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
  Error: Uncaught [TypeError: submitForm is not a function]
      at reportException (D:\software_code\react_code\react_testing_with_jest\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
      at invokeEventListeners (D:\software_code\react_code\react_testing_with_jest\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:209:9)
      at HTMLUnknownElementImpl._dispatch (D:\software_code\react_code\react_testing_with_jest\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (D:\software_code\react_code\react_testing_with_jest\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (D:\software_code\react_code\react_testing_with_jest\node_modules\jsdom\lib\jsdom\living\nodes\HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (D:\software_code\react_code\react_testing_with_jest\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (D:\software_code\react_code\react_testing_with_jest\node_modules\react-dom\cjs\react-dom.development.js:237:16)
      at invokeGuardedCallback (D:\software_code\react_code\react_testing_with_jest\node_modules\react-dom\cjs\react-dom.development.js:292:31)
      at invokeGuardedCallbackAndCatchFirstError (D:\software_code\react_code\react_testing_with_jest\node_modules\react-dom\cjs\react-dom.development.js:306:25)
      at executeDispatch (D:\software_code\react_code\react_testing_with_jest\node_modules\react-dom\cjs\react-dom.development.js:389:3) TypeError: submitForm is not a

function

TypeError: submitForm is not a function

  11 | 
  12 |         return (
> 13 |             <form data-testid='movie-form' onSubmit={() => submitForm({
     |                                                            ^
  14 |                 text
  15 |             })}>
  16 |                 <input type='text'/>

  at onSubmit (src/components/MovieForm.js:13:60)
  at Object.<anonymous> (src/test/MovieForm.test.js:13:15)

Joe

4 months ago

hey, I have the same problem SubmitForm is not a function.

Fernando

over 2 years ago

Hello Scott, I followed the tutorial. I created a mock-up function, but I got this error.

const onSubmit = () => jest.fn();

jest.fn() value must be a mock function or spy. Received: function: [Function onSubmit]

Laith

over 2 years ago

This is great Scott! Very helpful

Luke

over 2 years ago

I think the beginning of this video needs a bit of tidy up.. The title is all :spying and mocking in React", however that doesn't actually happen until 7 minutes into a 9 minute video..

Katy

over 2 years ago

@Ariel Hi, Ariel. Does this thread help? https://github.com/facebook/jest/issues/5266 I think it's not anything you have to worry about if you see that your test suites run and pass.

Ariel

over 2 years ago

Hi. I have a weird error. I follow you 1 to 1 and the moment I add to my code

fireEvent.click(getByText('Submit')); (Line 14 of NewMovie.test.js in video #13)

I have a huge error in the console:

console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29 Error: Not implemented: HTMLFormElement.prototype.submit

There isn't one on your video. Any help with that?

Lukas

almost 3 years ago

Hey, Scott. Very good work. Thanks for that.

Want to join the conversation?

Become a Pro member today!