how to test and mock react function/component - reactjs

Question

this is my test for user registration using jest + react testing library, the problem is that the test update the db.
therefore at the second run the test fails (beacuse the first run registered the user)
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
the test
test('signup should dispatch signupAction', async () => {
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
initialState = {
authReducer: { isAuthenticatedData: false },
};
const store = mockStore(initialState);
render(
<Provider store={store}>
<Router>
<UserSignup />
</Router>
</Provider>
);
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(() => expect(store.getActions()[0].type).toBe('SIGNUP_SUCCESS'));
});
sign up component
const userSignup = () => {
const dispatch = useDispatch();
const isAuthenticatedData = useSelector((state) => 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) => setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
if (password === re_password) {
try {
dispatch(
signupAction({
name,
email,
password,
re_password,
})
);
setAccountCreated(true);
} catch {
window.scrollTo(0, 0);
}
}
};
if (isAuthenticatedData) return <Redirect to='/' />;
if (accountCreated) return <Redirect to='/login' />;
return (
<div data-testid='userSignup'>
<h1>Sign Up</h1>
<p>Create your Account</p>
<form onSubmit={(e) => onSubmit(e)}>
<div>
<input
type='text'
placeholder='Name*'
name='name'
value={name}
onChange={(e) => onChange(e)}
required
/>
</div>
<div>
<input
type='email'
placeholder='Email*'
name='email'
value={email}
onChange={(e) => onChange(e)}
required
/>
</div>
<div>
<input
type='password'
placeholder='Password*'
name='password'
value={password}
onChange={(e) => onChange(e)}
minLength='6'
required
/>
</div>
<div>
<input
type='password'
placeholder='Confirm Password*'
name='re_password'
value={re_password}
onChange={(e) => onChange(e)}
minLength='6'
required
/>
</div>
<button type='submit'>Register</button>
</form>
<p>
Already have an account? <Link to='/login'>Sign In</Link>
</p>
</div>
);
};
export default connect()(userSignup);
sign up action
export const signupAction =
({ name, email, password, re_password }) =>
async (dispatch) => {
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 });
}
};

Answer 1

Assuming you are writing unit tests (which is probably where you should start), then you are looking for a concept called "mocking." The idea is that your React unit tests should only test your React code. Your React unit tests should not depend on a database or even an API. That introduces all sorts of challenges, as you have discovered.
Basically how mocking frameworks work is you configure them with some fake data. Then when you run the tests, your code uses that fake data instead of calling the API.
I see you are using axios to call your API. I suggest you check out axios-mock-adapter to help you mock those axios calls.

Answer 2

I managed to solve this problem here is the test for those who needs it
import '#testing-library/jest-dom/extend-expect';
import { render, screen } from '#testing-library/react';
import { Provider } from 'react-redux';
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import UserSignup from '../../../components/users/UserSignup';
import configureStore from 'redux-mock-store';
import { signupAction } from '../../../redux/actions/auth';
import thunk from 'redux-thunk';
import userEvent from '#testing-library/user-event';
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
let initialState = {
authReducer: {},
};
const store = mockStore(initialState);
jest.mock('../../../redux/actions/auth', () => ({ signupAction: jest.fn() }));
test('Redux - signup should dispatch signupAction', () => {
render(
<Provider store={store}>
<Router>
<UserSignup />
</Router>
</Provider>
);
initialState = {
authReducer: { isAuthenticatedData: false },
};
const store = mockStore(initialState);
render(
<Provider store={store}>
<Router>
<UserSignup />
</Router>
</Provider>
);
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' });
const nameValue = 'testuser';
const emailValue = 'testuser#gmail.com';
const passwordValue = 'testuser123';
const rePasswordValue = 'testuser123';
userEvent.type(nameTextbox, nameValue);
userEvent.type(emailTextbox, emailValue);
userEvent.type(passwordTextbox, passwordValue);
userEvent.type(confirmTextbox, rePasswordValue);
userEvent.click(signupButton);
const timesActionDispatched = signupAction.mock.calls.length;
expect(timesActionDispatched).toBe(1);
expect(signupAction.mock.calls[0][0].name).toEqual(nameValue);
expect(signupAction.mock.calls[0][0].email).toEqual(emailValue);
expect(signupAction.mock.calls[0][0].password).toEqual(passwordValue);
expect(signupAction.mock.calls[0][0].re_password).toEqual(rePasswordValue);
});