received value must be a mock or spy function
Я бы хотел проверить вызывается ли эндпоинт login после нажатия кнопки submit, но я не знаю как мне "замокать" функцию login
test('Submitting the form with empty fields', async () => {
const login = store.dispatch(authApiSlice.endpoints.login.initiate({username: '', password: ''}))
const { getByTestId, findByTestId } = render(
<Form />
)
const firstInput = getByTestId('usernameField')
const submitButton = await findByTestId('submitBtn')
expect(firstInput).not.toBeInvalid()
await act(() => {
fireEvent.submit(submitButton)
});
expect(getByTestId('usernameField')).toBeInvalid()
expect(getByTestId('passwordField')).toBeInvalid()
expect(login).not.toHaveBeenCalled()
})
import React, { ReactElement } from 'react'
import { render, RenderOptions } from '@testing-library/react'
import { Provider } from 'react-redux'
import { ToastContainer } from 'react-toastify'
import { CssBaseline, ThemeProvider } from '@mui/material'
import { store } from '../store/store'
import { theme } from '../theme/theme'
import { BrowserRouter } from 'react-router-dom'
export const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
return (
<Provider store={store}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<CssBaseline />
{children}
</BrowserRouter>
</ThemeProvider>
<ToastContainer />
</Provider>
)
}
const customRender = (
ui: ReactElement,
options?: Omit<RenderOptions, 'wrapper'>,
) => render(ui, { wrapper: AllTheProviders, ...options })
export * from '@testing-library/react'
export { customRender as render }
import { IChangeTaskReq, ICreateTaskReq, ITask, IToken, IUser, IUserReq } from "../../types/types";
import { authApi } from "./auth-api";
export const authApiSlice = authApi.injectEndpoints({
endpoints: builder => ({
login: builder.mutation<IToken, IUserReq>({
query: (body) => ({
url: `auth/login`,
method: 'POST',
body
}),
invalidatesTags: ['Token', 'Tasks']
}),
})
})
export const { useLoginMutation } = authApiSlice