How to learn something new while solving errors

Hey, fellow techies,

I have been having the itch to write about something on the internet. But I did not know what to write about.

Only recently, I had some enlightenment. What if I wrote about a topic that I was learning? I could share my learning experience with others, the "barriers," the "Aha" moments, the "Why does this code work?" and much more.

Cut to the chase, I decided to learn unit testing in React applications.

And the journey begins...

At first, I did not know where to begin. So, I started wandering the internet and found some shiny terms such as End to End testing (E2E), Test Driven Development (TDD), Code Driven Development (CDD), etc. But most of them did not make much sense to me.

Still, it was a good place to get my toes wet. I found a few videos on YouTube explaining the shiny terms and their use cases. Through YouTube, I was able to learn how to set up test cases.

These two videos, by programming with mosh, helped me understand most of the stuff:

• JavaScript Unit Testing Tutorial for Beginners
• React Testing for Beginners

But, the million dollar question was, where do I use this? Well, we haven't tried this way of testing the applications at my place of work. So, I took the plunge.

The website is built using Next JS with pages router, Chakra UI, and React query. So, I set everything up like in the tutorials and wrote my first test case.

BAM!!

Errors start popping up one by one. I get a total of 4 different types of errors.

1. Error with absolute imports
Our project uses absolute imports, i.e., @/components/ui/button like other Next JS projects. It has been the standard approach with Next JS for a while now. The tsconfig.json file contains the "baseUrl" option that is set as the root directory of the project.

However, the testing library only uses its config file. So, it was going nuts within the first line of code. I started googling for solutions and found a few that did not work for me. But all is not lost, and a solution appears. You would need to install the "path" package from the NPM registry and use its resolve method in your config.

p.s. I have attached the code snippet below this error because you can solve both of them by updating the config file

2. React is not defined

When I try to render one of the components, there is a big error: React is not defined (It's funny because this is a React project). We were using a higher version of react >= 17. So there's no compulsion to import react.

But the testing library thinks this is unacceptable. So, I tried to find a solution to this. And it involves installing a plugin and updating the vitest config file.

import { resolve } from 'path'
import { defineConfig } from 'vitest/config'
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, './src') }],
  },
})

3. Next Router is not mounted

Another error that I encountered on the way was related to the next router not being mounted. Some quick research showed me that the next router cannot be used outside a Next JS application. The next documentation asked me to mock the router, and I thought it was funny.

This is the only solution I was able to find through chatGPT for the above error.

vi.mock('next/router', () => ({
  useRouter: () => ({
    push: vi.fn(),
    query: {},
    pathname: '/',
    asPath: '/',
    replace: vi.fn(),
  }),
}))

4. No QueryClient set, use QueryClientProvider to set one

This was one of the straightforward ones. To use react query, the entire code needs to be wrapped inside the queryClientProvider by react query. The component, when working as a system, is wrapped correctly and works fine.

But, as I said, the testing library renders a specific component, leading to the error. This error is somewhat similar to the error mentioned above. We tried using something out of context and, as a result, got an error.

   const queryClient = new QueryClient()

    // Wrap the component in QueryClientProvider
    const { container } = render(
      <QueryClientProvider client={queryClient}>
        <SignUpForm />
      </QueryClientProvider>
    )

I haven't had much luck with testing our application. Yet, I still wanted to share what I have learned so far about testing and solving errors while setting up test cases.

I hope this article is of some help to you.