Forem: Kota Ito

Testing Callback Functions with Jest

Kota Ito — Fri, 28 Jun 2024 19:22:32 +0000

When writing unit tests, you may encounter a scenario where you need to test a function that is passed as an argument to another function. Here's a practical example to demonstrate how you can achieve this using Jest.

Consider the following code as an example:

import {functionA} from 'path'

const exFunction=(functionB)=>{
  functionA(arg1,(arg2)=>{
    FunctionB(arg2)
  })
}

In this example, exFunction calls functionA, passing it a callback function. functionA then calls this callback with arg2.
It's important to note that the callback function is not called within exFunction directly. So we can not simply test the callback function by calling exFunction.

To test the callback function, we can use Jest's spyOn method to mock the implementation of functionA. This allows us to control its behaviour and ensure the callback function is executed with the desired argument. Here’s how you can do it:

First, import the module containing functionA and exFunction:

import * as functionAFile from 'path';

Next, use jest.spyOn to mock functionA. We will change its implementation to call the callback function with a predefined argument (arg2):

const arg2 = 'dummyArg';
jest.spyOn(functionAFile, 'functionA').mockImplementation((_arg1, callback) => {
  callback(arg2);
});

Now, let's write the test case to verify that functionB is called with arg2:

import {exFunction} from 'path'
import * as functionAFile from 'path'; // Import the entire module to spy on functionA

const arg2 = 'dummyArg';

// Mock functionA to call the callback with arg2
jest.spyOn(functionAFile, 'functionA').mockImplementation((_arg1, callback) => {
  callback(arg2);
});

it('should call functionB with arg2', () => {
  const functionB = jest.fn(); // Create a mock function for functionB

  // Call exFunction with functionB as the argument
  exFunction(functionB);

  // Verify that functionB was called with arg2
  expect(functionB).toHaveBeenCalledWith(arg2);
});

In this test:

We use jest.fn() to create a mock function for functionB.
We call exFunction with functionB as its argument.
Finally, we use expect to assert that functionB was called with arg2. By mocking functionA and controlling its behavior, we can effectively test the callback function and ensure our code behaves as expected.

Mock Class Constructor in Jest Test with Mocking Partials

Kota Ito — Thu, 20 Jun 2024 22:27:43 +0000

I've been implementing tests on server-side code using Jest. One thing I initially struggled with was mocking class constructors. Here’s a guide on how to do it :)

Example Code

Here is the code for the function you want to test:

export const abc=(arg)=>{
return new ClassA(arg)
}

In the test, you want to verify that the function abc returns a new instance of ClassA and that the ClassA constructor is called with arg. The first step is to mock the ClassA constructor.

How to mock the Class Constructor?

You can mock the Class Constructor and even its implementation with mock function from Jest .

Here is how you do it.

jest.mock('path for ClassA', () => ({
  ClassA: jest.fn().mockImplementation(() => ({ ClassA: 'dummyClassAResult' })),
}));

In the code above, I am using a partial mock, meaning I’m only mocking part of the module where ClassA is defined.

The module is mocked so that ClassA is a Jest function. Additionally, I completely replace the implementation of the mock function to return an object { ClassA: 'dummyClassAResult' }.

Note that you cannot use mockReturnValue to mock the return value of a class constructor. Instead, you should use mockImplementation to achieve this.

Here is the incorrect approach:

jest.mock('ClassA module path', () => ({
  ClassA: jest.fn().mockReturnValue({ ClassA: 'dummyClassAResult' })
}));

Using mockReturnValue does not work for class constructors because it is intended for mocking the return values of functions. When mocking class constructors, you need to replace the implementation of the constructor itself to ensure the class instance is created correctly.

Official Documentation for Jest mock

How to Keep Some Parts of a Mocked Module

If you mock a module as shown above, only ClassA is mocked. This means that other functions and objects exported from the module will not be mocked and will show as undefined when imported. So, what if you want to keep some of them intact? You can use the jest.requireActual function for such cases.

import { originalExportedObject, ClassA } from 'ClassA module path';

jest.mock('ClassA module path', () => {
  const actualModule = jest.requireActual('ClassA module path');
  return {
    ...actualModule,
    ClassA: jest.fn().mockImplementation(() => ({ ClassA: 'dummyClassAResult' })),
  };
});

In the code above, jest.requireActual is used to extract the original exports from the module. This allows you to keep originalExportedObject and other parts of the module unchanged, while only ClassA is mocked.

Time to write a test

  //import ClassA
  import {ClassA} from 'ClassA module path'

  //mock the module
  jest.mock('ClassA module path', () => ({ 
  ClassA: jest.fn()
  .mockImplementation(() => ({ ClassA:'dummyClassAResult' })),
  }));

  //test
  it('Returning ', () => { 
      const arg='dummyArg'
      const result=abc(arg)

      expect(ClassA).toHaveBeenCalledWith(arg); //// Since ClassA is now a Jest function, you can use assertions on it!
      expect(result).toStrictEqual({ ClassA: 'dummyClassAResult' })
    });

I hope this helps my fellow developers to write test on their code!

Three Important Things I Learned While Jest Testing My Next.js Application

Kota Ito — Sun, 19 May 2024 19:49:20 +0000

I am an absolute beginner with Jest, and I've been learning a lot every day.

In this article, I'll jot down five things I've recently learned about Jest testing in Next.js.
Whether it's about mocking or setting up the test environment, I'll write it all down as a note for myself📝.

1: Using renderHook to Test React Custom Hooks

I wanted to test my React custom hook, useAuth, which returns a set of user session data in an object. Initially, I tried to test useAuth like this:

    const { session, status, userId } = useAuth();
    expect(session).toStrictEqual({ user: { id: 'dummyId' } });
    expect(status).toBe('authenticated');
    expect(userId).toBe('dummyId');

However, I encountered the following error:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

To resolve this error, you need to call useAuth using renderHook from @testing-library/react:

import { renderHook } from '@testing-library/react';
// ...
   const { result } = renderHook(() => useAuth());
    const { session, status, userId } = result.current;

Using renderHook correctly calls useAuth within the proper context and returns the result object, allowing you to access session, status, and userId without any errors!

2: Always Remember to mockReset or mockRestore

It is a good practice to always use mockReset or mockRestore to reset mocks between tests to avoid unexpected behavior.

For example, consider the following test cases:

it('when status is unauthenticated, router.push is called', () => {
    mockUseSession.mockReturnValue({
      data: null,
      status: 'unauthenticated',
    });

    renderHook(() => useAuth());

    expect(pushMock).toHaveBeenCalledWith('/auth/signin');
  });
  it('when status is loading, it should return loading as status', () => {
    mockUseSession.mockReturnValue({
      data: null,
      status: 'loading',
    });
    const { result } = renderHook(() => useAuth());
    const { status } = result.current;
    expect(status).toBe('loading');
  });

In these tests, mockUseSession returns different values using mockReturnValue. To ensure that each mock value doesn't interfere with others, you should reset the mock after each test:

  afterEach(() => {
  // Reset mockUseSession to avoid test interference
    mockUseSession.mockReset();
  });

It's important to note that you should **not* use mockRestore in this case above. mockRestore removes the mock and restores the original function. This means that if you use mockRestore, you would lose the mock entirely, and you would need to reapply the mock for each test. This is not ideal if you want to retain the mocked implementation but reset its state between tests.

3: When using Next.Font, don't forget to mock the next/font/google file to avoid issues in your tests.

If you are using Next.Font in your Next.js application, you have to mock the 'next/font/google' file to avoid the following error.

 FAIL  __tests__/hooks/useModal.test.tsx
  ● Test suite failed to run

    TypeError: (0 , google_1.Mulish) is not a function

In your root repository, create the _mocks_ folder and add 'nextFontMock.js' file which contains following code.

import { jest } from '@jest/globals';
module.exports = {

  Staatliches: jest.fn(() => ({
    className: 'mocked-staatliches-font',
  })),
  Mulish: jest.fn(() => ({
    className: 'mocked-mulish-font',
  })),

...add more
};

and add a following lien to jest.config.js(ts)

  moduleNameMapper: {
    ...other settings,
    'next/font/google': '<rootDir>/__mocks__/nextFontMock.js',
  },

With this setting, whenever next/font/google is imported in your tests, Jest will use the mock implementation instead.

Note: This is also useful for mocking specific modules that are complex or unnecessary for the context of your tests.

Conclusion

It is actually harder for me to set up the test environment than testing itself at first 😅
I have gotten so many errors that took me a while to solve and it was so frustrating.
But it is important to keep in mind that testing is necessary for a secure and stable application so I have to keep learning and improving my skills.

Thank you for reading!! 📖

[Cover photo credit]
from:Unsplash
taken by: Hans Reniers

【React.js, Tailwind】Making an Dynamic Textarea

Kota Ito — Tue, 02 Apr 2024 23:46:28 +0000

I'm currently working on developing my first application page, which features a chat form using OpenAI's 'chat completions' API. This chat functionality is straightforward: it sends a POST request to the API with the user's message and retrieves the AI's response.

During the form creation process, I noticed that the textarea element doesn't automatically adjust its vertical size when a new line is added.

In this article, I want to share how I managed to create a textarea that dynamically adjusts its height whenever a user adds a new line.

How I implemented

First I came up with updating the textarea height using ref, useState and useEffect.



useEffect(() => {
  if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
        }
    }, [text]);

....

return (
 <textarea
   ref={textareaRef}
   value={text}
   onChange={handleChange}
   style={{ width: '300px', padding: '10px', boxSizing: 'border-box', overflow: 'hidden', resize: 'none' }}
 />
)

In the code above, I just update the textarea style by extracting its scrollHeight and apply the style to the DOM.
However, it's generally recommended to avoid directly manipulating the DOM using refs and instead use state and props to control the UI.

So I needed to implement it another way and got a great idea from the internet.

Using Dummy Message element



<div className="w-full relative">
     <div className=" py-sm px-md overflow-y-hidden whitespace-pre-wrap  break-words max-h-[164px] min-h-[44px] invisible leading-[24px]">
       {message}
      {/* dummy text*/}|
     </div> // this div element is a dummy message element
     <textarea
       className="absolute right-0 top-0 bottom-0 left-0 py-sm px-md resize-none leading-[24px]"
       value={message}
       onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)}
      />
</div>

In the code above, textarea is positioned absolutely within a parent div, allowing it to resize along with its parent.
This parent div also has another div tag, which is what we call "dummy message div".
this dummy div mirrors the content of the textarea, which is controlled by the message state.

As the user types in textarea, the message state updates, causing the dummy div to resize. This, in turn, resizes the parent div, allowing the textarea to adjust its size dynamically without displaying a vertical scrollbar.

whitespace-pre-wrap and dummy text

Maybe you realize that dummy div has this property "whitespace-pre-wrap" which is preserve newlines and spaces within an element. Also text will be wrapped normally.
Without this property, dummy message doesn't reflect the new lines and spaces that the user types in a textarea.
Additionally, it's important to have a dummy text under message in a dummy div. This ensures that the div maintains its line height when the user creates a new line.

Result

When a user breaks a new line, a textarea expand vertically.

Conclusion

I explored a common and effective technique for creating an auto-resizing textarea, which involves using a dummy div element. This approach particularly appealed to me because it avoids direct interaction with the DOM, a practice that is generally discouraged due to potential performance and maintainability issues.

However, one concern that arose was the potential impact on performance caused by updating the content of the dummy div on every keystroke. Despite this, I'm happy with the implementation.

Photo credit:
from Unsplash
by Volodymyr Hryshchenko

【Next.js, React.js】Making Image with Loading component.

Kota Ito — Thu, 28 Mar 2024 21:15:36 +0000

In this post, I'll share a simple technique to create a reusable image component in Next.js that displays a loading indicator until the image has fully loaded. This is achieved using the onLoad event handler provided by Next.js's Image component.

ImageWithLoading component


import Image from 'next/image';
import React from 'react';
import cn from 'classnames';
import Loading from '@/components/elements/message/Loading';

type ImageProps = {
  id: string;
  url: string;
  alt: string;
};

const ImageWithLoading: React.FC<ImageProps> = ({ url, alt }) => {
  const [imageLoaded, setImageLoaded] = React.useState<boolean>(false);

  return (
    <>
      {!imageLoaded && <Loading size="large" />}
      <Image
        src={url}
        alt={alt}
        fill={true}
        style={{ objectFit: 'cover' }}
        className={cn('rounded-md', { 'opacity-0': !imageLoaded })}
        onLoad={() => setImageLoaded(true)}
      />
    </>
  );
};

export default ImageWithLoading;

In this component:

The imageLoaded state is initially set to false, indicating that the image has not yet loaded.
The Loading component is displayed while imageLoaded is false.
The Image component's className uses the classnames (imported as cn) library to conditionally apply the 'opacity-0' class when imageLoaded is false, making the image transparent.
The onLoad event handler sets imageLoaded to true once the image has finished loading, which removes the 'opacity-0' class and hides the Loading component.

Using the classnames library instead of template literals for conditional class names enhances the reusability of the component. It provides a standardized and efficient way to handle dynamic class names, improving code readability and maintainability.

Use case

 <div htmlFor={piece.id} 
className="flex relative h-[200px] w-[150px] bg-white rounded-md"> 
   <ImageWithLoading id={piece.id} url={piece.imageUrl} alt={piece.title} />
</div>

Note:
When using the fill prop in Next.js Image, it's important to note that the image will be positioned relative to the nearest ancestor element with a position: relative; style, or it will be positioned relative to the root of the document if no such ancestor is found. Therefore, to ensure that the image is positioned and sized correctly, you should add the relative class to a parent element or suitable ancestor element.

Photo credit:
from Unsplash
by Mike van den Bos

【Next.js, GraphQL, Apollo Client】How to rewrite Apollo Client cache after a mutation. -part2-

Kota Ito — Wed, 20 Mar 2024 01:16:02 +0000

In Part 1, I explored how to update the Apollo Client cache using RefetchQueries. However, as mentioned in the article, this approach results in unnecessary network requests. In this article, I will demonstrate how to use a GraphQL Query to read and rewrite the cache.

Using GraphQL Query

The official Apollo Client documentation presents various methods for reading and writing to the cache.

Among these, the GraphQL query is a method for both reading cache and writing new cache data.

readQuery

The readQuery method is a straightforward way to execute a GraphQL query directly on your cache. As the documentation states:

The readQuery method enables you to execute a GraphQL query directly on your cache.

In essence, readQuery allows you to retrieve data from the cache with ease.
Below is an example from the documentation on how to use readQuery:

const READ_TODO = gql` //defining the query
  query ReadTodo($id: ID!) {
    todo(id: $id) {
      id
      text
      completed
    }
  }
`;

// Fetch the cached to-do item with ID 5
const { todo } = client.readQuery({
  query: READ_TODO,
  // Provide any required variables in this object.
  // Variables of mismatched types will return `null`.
  variables: {
    id: 5,
  },
});

writeQuery

The writeQuery is also a self-explanatory method, according to the documentation:

The writeQuery method enables you to write data to your cache in a shape that matches a GraphQL query. It resembles readQuery, except that it requires a data option.

Using writeQuery, you can update the cache to ensure that the UI remains synchronized with the data.

Below is the example use case of writeQuery.

const completeTask = async (taskId) => {
  // Optimistically update the cache
  client.writeQuery({
    query: GET_TASKS_QUERY,
    data: {
      tasks: tasks.map(task =>
        task.id === taskId ? { ...task, completed: true } : task
      ),
    },
  });

  // Send the mutation to the server
  try {
    await client.mutate({
      mutation: COMPLETE_TASK_MUTATION,
      variables: { taskId },
    });
  } catch (error) {
    // Rollback the optimistic update if the mutation fails
    client.writeQuery({
      query: GET_TASKS_QUERY,
      data: { tasks },
    });
  }
};

In the code example above, when a user completes a task in a to-do list, it optimistically updates the cache using writeQuery, which enables the app to update the UI accordingly. If there is an error in the process of completing the task, the cache is updated again to reflect the error state.

Update function

In my scenario, the cache needs to be modified immediately after a mutation occurs. Therefore, I provide an update function to useMutationm in which I use both readQuery and writeQuery, to manually apply changes to my cached data.

Here is the code.

const [registerPiece] = useMutation<RegisterPieceMutationData>(REGISTER_PIECE_MUTATION, {
    update: (cache, { data }) => {
      if (data) {
        const existingData: WardrobeQueryData | null = cache.readQuery({
          query: GET_WARDROBE_QUERY,
        });

        if (existingData) {
          cache.writeQuery({
            query: GET_WARDROBE_QUERY,
            data: { piece: [data.piece, ...existingData.piece] },
          });
        }
      }
    },

As an option for REGISTER_PIECE_MUTATION, I put update function.

The update function is passed a **cache object **that represents the Apollo Client cache. This object provides access to readQuery/writeQuery that I mentioned above. Additionally, it is passed data that contains the result of the mutation, which you can use to update the cache with writeQuery method.

  if (data) {
        const existingData: WardrobeQueryData | null = cache.readQuery({
          query: GET_WARDROBE_QUERY,
        });

In the code snippet above, if data is present, the readQuery method is triggered, and the result is stored in existingData.

if (existingData) {
          cache.writeQuery({
            query: GET_WARDROBE_QUERY,
            data: { piece: [data.piece, ...existingData.piece] },
          });
        }

Then, if existing data is not null or undefined, it will execute writeQuery method to rewrite the cache.

The result↓

Right after the registration of the piece, a user is not required to refresh the page to see the newly registered piece now.

Conclusion

Although the example in this article demonstrated a straightforward use case for readQuery and writeQuery, updating the cache can be a bit daunting. If not done correctly, users may encounter confusing or incorrect UI results. Other than GraphQL Queries, there are also GraphQL fragments and the modify method for updating existing cache data or inserting new cache data. I will explore the GraphQL fragment next when I implement update piece detail feature.

I hope this article has been helpful for those who are just starting out with Apollo Client, like myself :)!!

Photo Credit
from:Unsplash
taken by:NASA

【Next.js, GraphQL, Apollo Client】How to rewrite Apollo Client cache after a mutation. -part1-

Kota Ito — Thu, 14 Mar 2024 00:40:15 +0000

In this article, I'm going to share how I update the my app UI after a mutation by providing an upload function to useMutation.

I am right now developing an application using GraphQL and Apollo Client, which has form where user can register their favourite piece of clothes.
After a successful register, user will be navigated to a 'wardrobe' page, where all the registered pieces are displayed.

wardrobe page↓

But If I just implement register piece function using useMutation, like below, users won't see the piece that they just registered unless they reload the page.

 const [registerPiece] = useMutation<RegisterPieceMutationData>(REGISTER_PIECE_MUTATION);

This is because it doesn't refetch all the pieces of clothes data every time users visit the wardrobe page. It obtains the data from Apollo Client cache that is stored the last time it fetched the data from GraphQL server.

So I need to rewrite the cache every time user registered the piece. But How?

Using Refetch Query?
There are several ways to rewrite the cache.
The easiest way is to use refetchQueries.

const [addTodo, { data, loading, error }] = useMutation(ADD_TODO, {
  refetchQueries: [
    GET_POST, 
  ],
});

The code above is from the Apollo Client official documentation.
As shown in code above, you can put refetchQueries array in mutation's option.
This enable app to refetch a GET_POST query after performing ADD_TODO mutation and that rewrite the cache as a result.

in My Case↓

  const [registerPiece] = useMutation<RegisterPieceMutationData>(REGISTER_PIECE_MUTATION, {
    refetchQueries: [
      {
        query: GET_WARDROBE_QUERY, //refetch all the pieces data
      },
    ],
  });

While the use of a refetch query is straightforward and useful, it comes with the downside of extra network requests. This can result in suboptimal performance due to the increased load times and data usage.

So I decided to use update function instead, which I will explain in the part2.

Cover Photo Credit:
from Unsplash
taken by Ello

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part3-

Kota Ito — Sun, 10 Mar 2024 22:17:08 +0000

In part1:
I created a ClientPortal component to render toast messages in a specific DOM element.
✏️https://dev.to/c0xxxtv/reactjs-making-a-simple-toast-message-component-with-usecontext-part1-1l9l

In part2:
Created toast message component to be rendered.
✏️https://dev.to/c0xxxtv/reactjs-making-a-simple-toast-message-component-with-usecontext-and-react-portal-part2-5fmk

In part3, I will define ToastContext using useContext hook.

But Why Using Context??

I have 2 reasons why I decided to use useContext for my toast message feature.

1: Toast message will persist even after page transition
My app has a form that, after a successful submission, navigates the user to a different page. Therefore, the toast message needs to be displayed persistently, even after the page transition.

2: Accessibility Across Components
The function that displays the toast message becomes available in any file that's wrapped by ToastContext.Provider. In many scenarios, my app needs to display the toast message, especially after users perform CRUD operations. They want to see the result of their actions, so I wanted the function that triggers the toast message to be accessible anywhere in my app files."

1: Defining ToastContext


import React, { useState, useContext, useCallback } from 'react';

import { Children } from '@/types/types';

const ToastContext = React.createContext<ToastContextState | undefined>(undefined);

export const ToastProvider: React.FC<Children> = ({ children }) => {
  const [isShow, setIsShow] = useState(false);
  const [text, setText] = useState('');
  const [error, setError] = useState(false);

  const showToastMessage = useCallback((text: string, error: boolean | undefined) => {
    if (error) {
      setError(true);
    }
    setText(text);
  }, []);

  React.useEffect(() => {
    let timer: NodeJS.Timeout;
    if (isShow) {
      timer = setTimeout(() => {
        setIsShow(false);
      }, 5000);
    }
    return () => clearTimeout(timer);
  }, [isShow]);

  return <ToastContext.Provider value={{ showToastMessage, isShow, text, error }}>{children}</ToastContext.Provider>;
};

export const useToast = () => {
  const context = useContext(ToastContext);
  if (context === undefined) {
    throw new Error('useToast must be used within a ToastProvider');
  }
  return context;
};

Create a context in the code below.

const ToastContext = React.createContext<ToastContextState | undefined>(undefined);

Here I make three states.

 export const ToastProvider: React.FC<Children> = ({ children }) => {
  const [isShow, setIsShow] = useState(false);
  const [text, setText] = useState('');
  const [error, setError] = useState(false);

This showToastMessage function below takes two arguments,
one is text, the message text that will be displayed,
and the other is 'error' which is a boolean value that determine the message type. If the error is true, the toast message will contain an error icon; otherwise, it will display a success icon."

const showToastMessage = useCallback((text: string, error: boolean | undefined) => {
    if (error) {
      setError(true);
    }
    setIsShow(true)
    setText(text);
  }, []);

Code below is also important.
This useEffect will set the timer for the message, allowing it to disappear after 5000ms(5s).
Everytime isShow state changes, it will reset the timer to 5000ms.

 React.useEffect(() => {
    let timer: NodeJS.Timeout;
    if (isShow) {
      timer = setTimeout(() => {
        setIsShow(false);
      }, 5000);
    }
    return () => clearTimeout(timer);
  }, [isShow]);

The ToastProvider returns a Provider component with four values: showToastMessage, isShow, text, and error.

 return <ToastContext.Provider value={{ showToastMessage, isShow, text, error }}>{children}</ToastContext.Provider>;
};

Finally, we export a custom hook named useToast. This allows us to access the values provided by the ToastContext in any file that is wrapped by the provider, without having to define the context in each file.

export const useToast = () => {
  const context = useContext(ToastContext);
  if (context === undefined) {
    throw new Error('useToast must be used within a ToastProvider');
  }
  return context;
};

2: Wrapping the App with the ToastContext.Provider

Then I wrap the whole app with ToastProvider and place PortalToasty component in app file.

export default function App({ Component, pageProps }: AppProps) {
  const { pathname } = useRouter();

  return (
    <ApolloProvider client={apolloClient}>
      <SessionProvider session={pageProps.session}>
        <ToastProvider>
              <Header />
              <div >
                <Component {...pageProps} />
              </div>
          <PortalToasty/> //place PortalToasty here
        </ToastProvider>  // wrap the whole app with Toast Provider
      </SessionProvider>
    </ApolloProvider>
  );
}

3: Retrieve Values Using useToast Custom Hook in PortalToasty

In PortalToasty file, retrieve three global values using useToast custom hook to render the toast message conditionally.

const PortalToasty: React.FC = () => {
  const { isShow, text, error } = useToast();

The Flow of Toast Message Display
1：addToadtMessage set the 'text' to whatever text value you pass to it and 'isShow' to true
2: PortalToasty is displayed since the isShow value is set to true.
3: After 5s, isShow is set to false, causing the ToastMessage to disappear.

Use Case

Here's a use case: After a router.push, I added the addToastMessage function to display a toast message:

  const { addToastMessage } = useToast();  //retrieve the addToastMessage function using useToadt hook
......


router.push(`/wardrobe/${userId}`);
          addToastMessage('Your piece has been successfully registered!');

And Here Is the Result!!

Conclusion

Personally, I prefer toast messages over large modal messages that require me to click a cancel button to close them. I'm really pleased that I finally took the time to create a custom toast message using useContext and React Portal. It's crucial to have access to the function that triggers the toast message in any file, as you'll likely find yourself using it in many places. That's just how frequently toast messages are used. I hope you find this post helpful!

Photo Credit
from:Unsplash
taken by: NASA

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part2-

Kota Ito — Tue, 05 Mar 2024 01:00:57 +0000

*This is the part2 of Creating Toast Message Component with useContext and React Portal.
You can read part 1 here.

After I defined React Portal, I went on to make a Toast Message Component with ClientPortal which I defined in part2.

Making Toast Message Component

const PortalToasty: React.FC<PortalToastyProps> = ({ show, text, error }) => {
  return (
    <>
      {show && (
        <ClientPortal selector="#myportal"> //wrap message component with ClientPortal
          <div className="rounded-md fixed bg-lightGreen flex items-center shadow-md  top-[50px] right-[50px]">
            <div className=" flex items-center px-md justify-center">
              {error ? (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="1.5"
                  className="w-8 h-8 stroke-accentOrange"
                >
                  <path
                    d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M2112a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                  />
                </svg>
              ) : (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="1.5"
                  className="w-8 h-8 stroke-accentOrange"
                >
                  <path
                    d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                  />
                </svg>
              )}
            </div>
            <div className="bg-white h-full w-full py-md px-lg  rounded-r-md">{text}</div>
          </div>
        </ClientPortal>
      )}
    </>
  );
};

Wrap the component with ClientPortal
So that children component will be rendered into a DOM element referred to by "myportal", which I created in _document.tsx file like below.

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Theme>
          <Main />
          <div id="myportal" />
          <NextScript />
        </Theme>
      </body>
    </Html>
  );
}

Props
Three props are passed to this message component:

show: Determines whether the component is visible or not.
text: The message text to be displayed.
error: Indicates the message type. If set to true, the component render error icon on the message.

CSS property
The first div element should have the 'position: fixed' property so that it is positioned relative to the viewport. In my case, I added 'top-[50px] right-[50px]' to position it in the top right corner of the viewport.

continue to part 3, where I define ToastMessageContext using useContext hook.

Cover photo credit:
from Unsplash
taken by Seriously Low Carb

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part1-

Kota Ito — Fri, 01 Mar 2024 02:03:22 +0000

I have been a good friend with React-Toastify for a long time.
So whenever I need a toast mesage in my app I just go fot it.

But this time I made it from scratch using useContext and React portal so that the toast message fits in my app design concept.

First of all, I defined a React Portal component.

Why using React Portal

Why do we need to make a portal to implement a toast message to begin with?

Reason being that you can render the message component separate from the rest of the code in your app.
This allow you to avoid z-index and styling issues. Also, you can insert the message component at the root level of your app so it doesn't affect other content.

Define a React Portal

import React from 'react';
import ReactDom from 'react-dom';

type Props = {
  children: React.ReactNode;
  selector: string; //a CSS selector to select the target DOM element
};

const ClientPortal = ({ children, selector }: Props): React.ReactPortal | null => {
  const ref = React.useRef<Element>();
  const [mounted, setMounted] = React.useState(false);
// track whether the portal has been mounted

  React.useEffect(() => {
    const elm = document.querySelector(selector);
    if (elm) {
      ref.current = elm;
      setMounted(true);
    }
  }, [selector]);

  return mounted && ref.current ? ReactDom.createPortal(children, ref.current) : null;
};

export default ClientPortal;

In ClientPortal component, you have useEffect, which first searches for the DOM element specified by the selector, and if found, sets ref.current to the found element.
Also it sets mounted state to true, indicating the target for portal is ready.

This component utilizes ReactDOM.createPortal to render its children into a DOM element referred to by ref.current, effectively creating a portal that allows the children to be mounted onto a different part of the DOM tree than their parent component.

At the end, there is code that exports the component as the default export, so it can be imported and used in other files.

continue to part2

in part 2, I'm going to show how I, personally, made a Toast Messsage popper component.

from Unsplash
taken by maxim bober

[React, Next.js] Search function using useDebounce

Kota Ito — Thu, 29 Feb 2024 01:50:43 +0000

I wanted to create a search function in my app.
When it comes to search function, I personally like the search bar that I don't need to click a search button after I finish typing.
In order to implement the search function, where search result will be displayed automatically on the app UI after user has finished typing, I learned how to use 'useDebounce' custom hook.

useDebounce?

It has a simple function that returns the value after arbitrary duration of time.

(install useBounce library.
https://www.npmjs.com/package/use-debounce)

set up state and useDebounce

The useDebounce hook takes two arguments: the value to debounce and the debounce delay time in milliseconds (700ms in this case below).

 const [searchText, setSearchText] = React.useState('');
  const [searchTextQuery] = useDebounce(searchText, 700);

Search input

The search bar input is like this below.
So on every keystroke, searchText state changes but searchTextQuery value won't get updated until user has stopped typing for 700ms.

 <input
   value={searchText}
   onChange={(e) => setSearchText(e.target.value)}
   placeholder="search..."
   type="text"
   className="w-[250px] h-[30px] mr-sm p-sm rounded-md"
  />

Query using bounced searchText value

Since I'm using GraphQl, it takes an argument called skip where I put searchTextQuery, meaning as long as searchTextQuery is empty, it won't fetch data from the database.

 const {
    data: piecesData,
    loading: piecesLoading,
    error: piecesError,
  } = useQuery(SEARCH_PIECESS_QUERY, {
    variables: {
      userId,
      searchText: searchTextQuery,
    },
    skip: !searchTextQuery,
  });

useEffect to set PieceSearchResult state

Finally I set up the useEffect.
After searchTextQuery is returned from useDebounce, if there is fetched piecesData, it will update the pieceSearchResult state

React.useEffect(() => {
    if (piecesData && !piecesError && !piecesLoading) {
      setPieceSearchResult(piecesData.pieces_search);
    }
  }, [
    searchTextQuery,
    piecesData,
    piecesError,
    piecesLoading,
  ]);

This will update the search result display section UI below

<div className="grid grid-cols-4 gap-x-4 gap-y-5 w-full">
   {piecesLoading && <Loading size="small"></Loading>}
   {!piecesLoading && pieceSearchResult?.length === 0 && (
    <div className="text-sm h-10">No search result</div>)}
   {pieceSearchResult?.map((piece) => {
    return (
     <div key={piece.id}>
      <Link href={`/piece/${piece.id}`} onClick={handleModalClose}>
       <div className="relative w-[100%] aspect-[2/3] rounded-md overflow-hidden mb-1">
        <Image alt="piece image" src={piece.imageUrl} fill objectFit="cover" />
       </div>
      </Link>
     <div className="text-sm">{piece.title}</div>
    </div>);
    })}
</div>

Important note:
If you put both search input and search result display section in a modal, make sure you pass them as a children like below, so that the whole Modal component won't get re-rendered.

<ModalComponent>
  <input/>
  <searchResultDisplaySection/>
</ModalComponent>

Cover image:
from Unsplash
taken by Kenny Eliason

Forem: Kota Ito

Testing Callback Functions with Jest

Mock Class Constructor in Jest Test with Mocking Partials

Example Code

How to mock the Class Constructor?

How to Keep Some Parts of a Mocked Module

Time to write a test

Three Important Things I Learned While Jest Testing My Next.js Application

1: Using renderHook to Test React Custom Hooks

2: Always Remember to mockReset or mockRestore

3: When using Next.Font, don't forget to mock the next/font/google file to avoid issues in your tests.

Conclusion

【React.js, Tailwind】Making an Dynamic Textarea

How I implemented

Using Dummy Message element

whitespace-pre-wrap and dummy text

Result

Conclusion

【Next.js, React.js】Making Image with Loading component.

ImageWithLoading component

Use case

【Next.js, GraphQL, Apollo Client】How to rewrite Apollo Client cache after a mutation. -part2-

Using GraphQL Query

readQuery

writeQuery

Update function

Conclusion

【Next.js, GraphQL, Apollo Client】How to rewrite Apollo Client cache after a mutation. -part1-

【React.js】Making a Simple Toast Message Component with useContext and React Portal -part3-

But Why Using Context??

1: Defining ToastContext

2: Wrapping the App with the ToastContext.Provider

3: Retrieve Values Using useToast Custom Hook in PortalToasty

Use Case

Conclusion

【React.js】Making a Simple Toast Message Component with useContext and React Portal -part2-

Making Toast Message Component

【React.js】Making a Simple Toast Message Component with useContext and React Portal -part1-

Why using React Portal

Define a React Portal

continue to part2

[React, Next.js] Search function using useDebounce

useDebounce?

set up state and useDebounce

Search input

Query using bounced searchText value

useEffect to set PieceSearchResult state

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part3-

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part2-

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part1-