Testing Components
While testing my Login Form i am getting this error:
No QueryClient set, use QueryClientProvider to set one
21 Replies
adverse-sapphire•2y ago
i have used @pankod/refine-react-hook-form
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.tsxGitHub
refine/index.tsx at next · pankod/refine
Build your React-based CRUD applications, without constraints. - refine/index.tsx at next · pankod/refine
adverse-sapphire•2y ago
if possible can you please provide with an example implementation
Yes, you can check the source code/test setup of our
@pankod/refine-react-hook-form package.
https://github.com/pankod/refine/blob/next/packages/react-hook-form/test/index.tsx
https://github.com/pankod/refine/tree/next/packages/react-hook-formadverse-sapphire•2y 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
This tutorial can be helpful for you, https://javascript.plainenglish.io/using-react-hook-form-in-component-tests-497180abf3c0
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…
adverse-sapphire•2y ago
we have already tried that but our @pankod/refine-react-hook-form is prevent us to test
adverse-sapphire•2y 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
adverse-sapphire•2y 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
adverse-sapphire•2y ago
thanks
adverse-sapphire•2y ago
this after changing it to as you said i am getting this error
adverse-sapphire•2y 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
Can you please use
@pankod/refine-react-router-v6 instead of @pankod/refine-nextjs-router in test environment?adverse-sapphire•2y ago
after changing i am getting bellow error
adverse-sapphire•2y 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 ⚡adverse-sapphire•2y ago
i did not uderstand
can you please elaborate
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
adverse-sapphire•2y ago
thanks a lot😀