title: how to test and mock react function/component
body: <p>this is my test for user registration using jest + react testing library, the problem is that the test update the db.</p>
  <p>therefore at the second run the test fails (beacuse the first run registered the user)</p>
  <p>so my question is anyone know how can I mock this function?
  I will be grateful for any help I could get. thanks in advance</p>
  <p><strong>the test</strong></p>
  <pre><code>
      test('signup should dispatch signupAction', async () =&gt; {
          const middlewares = [thunk];
          const mockStore = configureStore(middlewares);
          initialState = {
              authReducer: { isAuthenticatedData: false },
          };
          const store = mockStore(initialState);
          render(
              &lt;Provider store={store}&gt;
                  &lt;Router&gt;
                      &lt;UserSignup /&gt;
                  &lt;/Router&gt;
              &lt;/Provider&gt;
          );
          const nameTextbox = screen.getByPlaceholderText('Name*');
          const emailTextbox = screen.getByPlaceholderText('Email*');
          const passwordTextbox = screen.getByPlaceholderText('Password*');
          const confirmTextbox = screen.getByPlaceholderText('Confirm Password*');
          const signupButton = screen.getByRole('button', { name: 'Register' });
  
          userEvent.type(nameTextbox, 'newtestuser');
          userEvent.type(emailTextbox, 'newtestuser@gmail.com');
          userEvent.type(passwordTextbox, 'testuser123');
          userEvent.type(confirmTextbox, 'testuser123');
          userEvent.click(signupButton);
  
          await waitFor(() =&gt; expect(store.getActions()[0].type).toBe('SIGNUP_SUCCESS')); 
      });
  
  </code></pre>
  <p><strong>sign up component</strong></p>
  <pre><code>
  const userSignup = () =&gt; {
      const dispatch = useDispatch();
      const isAuthenticatedData = useSelector((state) =&gt; state.authReducer.isAuthenticatedData);
      const [formData, setFormData] = useState({
          name: '',
          email: '',
          password: '',
          re_password: '',
      });
  
      const [accountCreated, setAccountCreated] = useState(false);
  
      const { name, email, password, re_password } = formData;
  
      const onChange = (e) =&gt; setFormData({ ...formData, [e.target.name]: e.target.value });
  
      const onSubmit = (e) =&gt; {
          e.preventDefault();
  
          if (password === re_password) {
              try {
                  dispatch(
                      signupAction({
                          name,
                          email,
                          password,
                          re_password,
                      })
                  );
                  setAccountCreated(true);
              } catch {
                  window.scrollTo(0, 0);
              }
          }
      };
  
      if (isAuthenticatedData) return &lt;Redirect to='/' /&gt;;
      if (accountCreated) return &lt;Redirect to='/login' /&gt;;
  
      return (
          &lt;div data-testid='userSignup'&gt;
              &lt;h1&gt;Sign Up&lt;/h1&gt;
              &lt;p&gt;Create your Account&lt;/p&gt;
              &lt;form onSubmit={(e) =&gt; onSubmit(e)}&gt;
                  &lt;div&gt;
                      &lt;input
                          type='text'
                          placeholder='Name*'
                          name='name'
                          value={name}
                          onChange={(e) =&gt; onChange(e)}
                          required
                      /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;input
                          type='email'
                          placeholder='Email*'
                          name='email'
                          value={email}
                          onChange={(e) =&gt; onChange(e)}
                          required
                      /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;input
                          type='password'
                          placeholder='Password*'
                          name='password'
                          value={password}
                          onChange={(e) =&gt; onChange(e)}
                          minLength='6'
                          required
                      /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;input
                          type='password'
                          placeholder='Confirm Password*'
                          name='re_password'
                          value={re_password}
                          onChange={(e) =&gt; onChange(e)}
                          minLength='6'
                          required
                      /&gt;
                  &lt;/div&gt;
                  &lt;button type='submit'&gt;Register&lt;/button&gt;
              &lt;/form&gt;
              &lt;p&gt;
                  Already have an account? &lt;Link to='/login'&gt;Sign In&lt;/Link&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      );
  };
  
  export default connect()(userSignup);
  
  </code></pre>
  <p><strong>sign up action</strong></p>
  <pre><code>export const signupAction =
      ({ name, email, password, re_password }) =&gt;
      async (dispatch) =&gt; {
          const config = {
              headers: {
                  'Content-Type': 'application/json',
              },
          };
  
          const body = JSON.stringify({
              name,
              email,
              password,
              re_password,
          });
  
          try {
              const res = await axios.post(`${process.env.REACT_APP_API_URL}/api/djoser/users/`, body, config);
  
              dispatch({ type: SIGNUP_SUCCESS, payload: res.data });
          } catch (err) {
              dispatch({ type: SIGNUP_FAIL });
          }
      };
  
  </code></pre>