OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to test if theme was changed using jest, next.js 13.4, next-theme?

  • Thread starter Thread starter antonkornilov-ua
  • Start date Start date
A

antonkornilov-ua

Guest
I have just started learning Jest, and I don't fully understand how everything fits together. However, that's not the question. I have a component:

Code:
'use client';
/**
 * ThemeButton Component:
 *
 * This component represents a button that allows users to toggle between light and dark themes in the application.
 * It utilizes the `useTheme` hook from `next-themes` to access the current resolved theme and set the theme to either
 * 'light' or 'dark' based on the user's preference. The button displays a sun icon for the light theme and a moon icon
 * for the dark theme. When clicked, it will switch the theme accordingly. The component also handles the initial mount
 * state to prevent flickering during theme change by setting a `mounted` state to true after the initial rendering.
 */

import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';

import { SunIcon, MoonIcon } from '@heroicons/react/24/solid';

const ThemeButton = () => {
    const [mounted, setMounted] = useState(false);
    const { resolvedTheme, setTheme } = useTheme();

    useEffect(() => setMounted(true), []);

    if (!mounted) return null;

    return (
        <button
            aria-label='Toggle Dark Mode'
            type='button'
            className='rounded-full p-2 transition-colors hover:bg-gray-900/50 hover:text-gray-50 dark:hover:bg-gray-700 '
            onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
            {resolvedTheme === 'dark' ? (
                <SunIcon className='h-7 w-7 text-primary-orange ' />
            ) : (
                <MoonIcon className='h-7 w-7 text-gray-900 hover:text-gray-50' />
            )}
        </button>
    );
};

export default ThemeButton;

And a simple test for it:

Code:
import { render, screen,  } from '@testing-library/react';
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import ThemeButton from '@/Components/ThemeButton';

test('should render the theme icon', () => {
    render(<ThemeButton />);

    const themeIcon = screen.getByLabelText('Toggle Dark Mode');
    expect(themeIcon).toBeInTheDocument();
});

Everything works fine, but I want to check which icon is displayed depending on the selected theme. How can I achieve this?

<p>I have just started learning Jest, and I don't fully understand how everything fits together. However, that's not the question. I have a component:</p>
<pre><code>'use client';
/**
* ThemeButton Component:
*
* This component represents a button that allows users to toggle between light and dark themes in the application.
* It utilizes the `useTheme` hook from `next-themes` to access the current resolved theme and set the theme to either
* 'light' or 'dark' based on the user's preference. The button displays a sun icon for the light theme and a moon icon
* for the dark theme. When clicked, it will switch the theme accordingly. The component also handles the initial mount
* state to prevent flickering during theme change by setting a `mounted` state to true after the initial rendering.
*/

import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';

import { SunIcon, MoonIcon } from '@heroicons/react/24/solid';

const ThemeButton = () => {
const [mounted, setMounted] = useState(false);
const { resolvedTheme, setTheme } = useTheme();

useEffect(() => setMounted(true), []);

if (!mounted) return null;

return (
<button
aria-label='Toggle Dark Mode'
type='button'
className='rounded-full p-2 transition-colors hover:bg-gray-900/50 hover:text-gray-50 dark:hover:bg-gray-700 '
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
{resolvedTheme === 'dark' ? (
<SunIcon className='h-7 w-7 text-primary-orange ' />
) : (
<MoonIcon className='h-7 w-7 text-gray-900 hover:text-gray-50' />
)}
</button>
);
};

export default ThemeButton;

</code></pre>
<p>And a simple test for it:</p>
<pre><code>import { render, screen, } from '@testing-library/react';
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import ThemeButton from '@/Components/ThemeButton';

test('should render the theme icon', () => {
render(<ThemeButton />);

const themeIcon = screen.getByLabelText('Toggle Dark Mode');
expect(themeIcon).toBeInTheDocument();
});

</code></pre>
<p>Everything works fine, but I want to check which icon is displayed depending on the selected theme. How can I achieve this?</p>
 
Top