complex-teal
complex-teal2y ago

Testing Components

While testing my Login Form i am getting this error: No QueryClient set, use QueryClientProvider to set one
21 Replies
complex-teal
complex-teal2y ago
i have used @pankod/refine-react-hook-form
Omer
Omer2y ago
Hey @srinivasbhuvanagiri 👋 , You should wrap your hook in Refine component to run it in test environment. Here is an example for you, https://github.com/pankod/refine/blob/next/packages/react-hook-form/test/index.tsx
GitHub
refine/index.tsx at next · pankod/refine
Build your React-based CRUD applications, without constraints. - refine/index.tsx at next · pankod/refine
complex-teal
complex-teal2y ago
if possible can you please provide with an example implementation
Omer
Omer2y ago
complex-teal
complex-teal2y ago
import React from "react"; import { useForm } from "@pankod/refine-react-hook-form"; export default function Login({ login }) { const { register, handleSubmit, formState: { errors }, reset, } = useForm(); const onSubmit = async (data) => { await login(data.email, data.password); reset(); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <label htmlFor="email">email</label> <input id="email" {...register("email", { required: "required", pattern: { value: /\S+@\S+.\S+/, message: "Entered value does not match email format", }, })} type="email" /> {errors.email && <span role="alert">{errors.email.message}</span>} <label htmlFor="password">password</label> <input id="password" {...register("password", { required: "required", minLength: { value: 5, message: "min length is 5", }, })} type="password" /> {errors.password && <span role="alert">{errors.password.message}</span>} <button type="submit">SUBMIT</button> </form> ); } this is my component how do i write test cases for it
Omer
Omer2y ago
Medium
Using React Hook Form in component tests
React Hook Form is an incredibly useful package for building out simple to complex web forms. This article illustrates our team’s approach…
complex-teal
complex-teal2y ago
we have already tried that but our @pankod/refine-react-hook-form is prevent us to test
complex-teal
complex-teal2y ago
No description
Omer
Omer2y ago
yes because you have to wrap your test container in <Refine /> component just like in our tests. You can find an example here, https://github.com/pankod/refine/blob/next/packages/react-hook-form/test/index.tsx#L24
GitHub
refine/index.tsx at next · pankod/refine
Build your React-based CRUD applications, without constraints. - refine/index.tsx at next · pankod/refine
complex-teal
complex-teal2y ago
import React from "react"; import { render, screen, fireEvent, waitFor } from "@testing-library/react"; import { Login } from "../authentication/login"; const mockLogin = jest.fn((email, password) => { return Promise.resolve({ email, password }); }); describe("Login", () => { beforeEach(() => { render(<Login />); }); it("should display required error when value is invalid", async () => { expect(screen.getByTestId('[data-testid="LoginForm"]')).toBeInTheDocument; }); }); this is my test code can you make changes to it
Omer
Omer2y ago
beforeEach(() => {
render(
<MemoryRouter initialEntries={routerInitialEntries}>
<Refine
dataProvider={dataProvider ?? MockJSONServer}
routerProvider={MockRouterProvider}
resources={resources ?? [{ name: "posts" }]}
options={{
reactQuery: {
clientConfig: {
defaultOptions: {
queries: {
retry: false,
},
},
},
},
disableTelemetry: true,
}}
>
<Login />
</Refine>
</MemoryRouter>
);
});
beforeEach(() => {
render(
<MemoryRouter initialEntries={routerInitialEntries}>
<Refine
dataProvider={dataProvider ?? MockJSONServer}
routerProvider={MockRouterProvider}
resources={resources ?? [{ name: "posts" }]}
options={{
reactQuery: {
clientConfig: {
defaultOptions: {
queries: {
retry: false,
},
},
},
},
disableTelemetry: true,
}}
>
<Login />
</Refine>
</MemoryRouter>
);
});
complex-teal
complex-teal2y ago
thanks
complex-teal
complex-teal2y ago
this after changing it to as you said i am getting this error
No description
complex-teal
complex-teal2y ago
import React from "react"; import { MemoryRouter } from "react-router-dom"; import { Refine } from "@pankod/refine-core"; import { render, screen } from "@testing-library/react"; import routerProvider from "@pankod/refine-nextjs-router"; import dataProvider from "@pankod/refine-simple-rest"; import { Login } from "../authentication/login"; const API_URL = "https://api.fake-rest.refine.dev"; const mockLogin = jest.fn((email, password) => { return Promise.resolve({ email, password }); }); describe("Login", () => { beforeEach(() => { render( <MemoryRouter> <Refine dataProvider={dataProvider(API_URL)} routerProvider={routerProvider} resources={[ { name: "Login", list: Login, }, ]} > <Login /> </Refine> </MemoryRouter> ); }); it("should display required error when value is invalid", async () => { expect(screen.getByTestId('[data-testid="LoginForm"]')).toBeInTheDocument; }); }); this is my test code
Omer
Omer2y ago
Can you please use @pankod/refine-react-router-v6 instead of @pankod/refine-nextjs-router in test environment?
complex-teal
complex-teal2y ago
after changing i am getting bellow error
complex-teal
complex-teal2y ago
No description
Omer
Omer2y ago
It's all about your test configuration. It looks like you have a dependency on nextjs router in the header component. You can try to mock this ⚡
complex-teal
complex-teal2y ago
i did not uderstand can you please elaborate
Omer
Omer2y ago
The error you are getting is not related to refine. A dependency you use in your header component does not work in your test environment. You can try to mock this or research how you can use next.js in a test environment. https://jestjs.io/docs/mock-functions
complex-teal
complex-teal2y ago
thanks a lot😀