- [Instructor] We saw when we were learning about follow-ups that sometimes states is not held on the form itself, but in the parent. To do this, we use them for state to flow to call functions in the parent, by passing them through as props. If we're trying to unit test components, this makes a dependency on the parent, which is not good. Jest provides a way to mock functions in components, and we can leverage this in this situation. This is different to Jest.mark that would be used if it was utility functioning parts from another file. To declare a mock function, we simply declare the mock function's name and set its value to jest.fn. If you need to, you can pass in an implementation call back. This is useful if the function being mocked is supposed to return something. We can then use this when we create the component in the test, passing the mock function name in as a prop. We're not concerned with the implementation of the function being mocked, because it's not declared in this component. We're happy if our component and the test calls this function with the correct arguments. Jest provides matches for function calls. The mains ones to know about are to have been called which returns true if the mock function was called, and to have been called with, which takes a set out of arguments and returns true if the function has been called with the prescribed arguments. If you're unit testing functions, the other matches might be useful. Let's see how we can implement this in a component test. We modified the form so it has a submit button and a non submit event handler. The phone function will call submit from props with the value of state, in the test we will mock the submit function passed in by props and use this when we render the form component. We'll simulate a click on the submit button. This should trigger the unsubmit event handler which in turn will trigger the submit function. There's a small hiccup here, react test render doesn't allow us to fire events without the event handler being defined. So we'll need to use a different library. We said earlier that we'd leveraged from the power of react testing library, so here it goes. We are testing libraries paid into our project, so we don't need to install it as a dependency. In our test suite for the form, we declare mock submit as a Jest function. We have also set a const for the test name. We've changed the test for the unchange to work as a test in react testing library. This involves creating a container using the render function, similar to using the create function to make a test instance in react test renderer. We then find the input in the container using the query selector function and its CSS selector and check its value as an empty string. We're testing library has an enhanced user events, so we've leveraged this here to type in the inputs. It simulates typing tests name into the input, firing it's on change event and updating the state. We then assert that the value in the name input is the value that was typed, and this is the same as the test that we did earlier. That's the mocking of functions now we can assume on submit event is fired calling the handler submit function, and ultimately the submit function from props. And if we can record the calling of the submit function from props, and what it was called with, we can make assertions, setting a value in the name input and firing a click event on the submit button should do this, so that's how we test. In the second spec, we get the container, the name input, and the submit button. We perform the actions of typing in the name input and clicking on the button. We use fire event from react testing library here, instructing it to click on the identify button. We then assert that the mock submit function has been called exactly once, checking this is good practice because it shows your functions work correctly. We also check that it has been called with the correct document, there'll be an object with a key of name and a value of tests name. Running these tests show that they pass. You can use this function mocking anywhere you have a dependency on a function that comes through props. So with this, you should be able to test the components that have their own internal data or anything that's passed to them by props.

Lectures

Introduction to Testing React with Jest - How to set up the Test Environment - Jest - The What and How of Testing in React - Snapshot Testing - Testing Components with Props - Mocking Components for Testing - Testing State Events Interactions - Testing Components Asynchronously - Testing Components with Routing - Testing Custom Hooks