- We have stating components. We don't need to test whether the set function works. Is this a concern of the call react code? What we are interested in, is if a component state change is fired by a user or event. And if that event causes the component to re-render with the correct value. Tests usually follow the pattern of arrange, act, assert. In snapshot tests, we don't perform an act part of the test. There are no moving parts. If we have events that cause side effects, like setting state, then we should test that the function attached to the event produces the output we expect. This is particularly useful when testing control components and forms. We can render the form's component and check that the initial value is what is initially set in state. We can then fire the event, say an on change with the value we wish to change it to. Then we assert that the value of the input is what we changed it to. This will check that the event fired, state was set and the element re-rendered with the new controlled value. To help us here, we need a function that will actually trigger the event. This is done by the act function. There are several versions of this function, provided by the different testing packages that essentially do the same thing. But it's crucial that you have the correct one imported. That's usually down to importing the act function from the same packages that the rendering function comes from. The act function has a callback as an argument, and this will trigger whatever you need to and whatever test instance you are testing. Again, the mechanism for actually making the event happen, differs depending on the test package you're using. You can then assert on the value being tested. This pattern can be followed for any interaction within a component. The form component, shown on the right of the screen, is a simple form that has a label for name, and a text input for the user to enter into. State has been declared to hold the value of name. The input calls on change and updates to state. The value of the input is controlled by the state. To test this, we've created a form test file shown on the left of the screen. We use, we act test render's create function to render the tree. We then access the root, which will be the form. And then find the input with the name of name. We assert to verify the initial state of the value set in the component as an empty string. React test render's act function is then called. It takes a callback, which acts on change proper the input, and sets the target objects value to test name. The act function is wrapping the on change. So the callback finishes executing before we move on. When the act function completes, we assert that the value of the input we're testing has been changed to the value we supplied. If we run the test, we can see that it passes. We won't repeat this for any other fields on the form. And we could also use this to test any user interactions that produce other events.

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 - Mocking Functions - Testing Components Asynchronously - Testing Components with Routing - Testing Custom Hooks