Testing styling with Jest - a comprehensive guide

Question

Testing styling with Jest - a comprehensive guide

Currently, I am working on a React project that utilizes SASS (SCSS syntax) for styling and Jest for unit testing. I've run into some difficulties when it comes to testing the styling in my project. To illustrate this issue, let's consider the following example:

Within component.js (which imports an external stylesheet)...

const Component = () => {
     return (
        <div className="greeting">Hello</div>
     )
}

In my .scss file...

.greeting {
    background-color: red;
}

For my test file...

test('background color should be red', () => {
    render(<Component />);
    expect(screen.getByText('Hello')).toHaveStyle('background-color: red');
})

The test fails with the following message:

expect(element).toHaveStyle()

    - Expected

    - background-color: red;

However, if I choose to use inline styling (

<div style={{backgroundColor: red}}>Hello</div>

), the test passes successfully.

I would appreciate hearing from anyone who has encountered this particular issue. Additionally, I'm curious to learn about different approaches people have taken for testing styling in Jest, especially when styles are stored in a separate .scss file.

For my tests, I rely on screen from @testing-library/dom and render from @testing-library/react.

css reactjs sass jestjs react-testing-library

Answer 1

Answer №1

If you want to retrieve the computed styles for an element, including those from class declarations, you can utilize the window.getComputedStyle() method.

To verify the background color of a div element in your scenario, you could implement the following test:

test('confirming background color is red', () => {
    render(<Component />);

    const targetElement = screen.getByText('Hello');
    const calculatedStyles = getComputedStyle(targetElement);

    expect(calculatedStyles.backgroundColor).toBe('red');
})

Answer 2

If you want to retrieve the computed styles for an element, including those from class declarations, you can utilize the window.getComputedStyle() method.

To verify the background color of a div element in your scenario, you could implement the following test:

test('confirming background color is red', () => {
    render(<Component />);

    const targetElement = screen.getByText('Hello');
    const calculatedStyles = getComputedStyle(targetElement);

    expect(calculatedStyles.backgroundColor).toBe('red');
})

Answer 3

Answer №2

My opinion aligns with Dominik's viewpoint. I find Jest to be effective for testing the attributes of your displayed HTML content. If the styling is not embedded directly in the HTML code, Jest may miss it, as you previously mentioned. The farthest extent you can test without including styles inline is confirming the presence of the correct class name.

Perhaps exploring a testing framework designed for browser execution like Cypress could offer additional solutions. Check out Cypress visual testing guidelines for further insights.

Answer 4

My opinion aligns with Dominik's viewpoint. I find Jest to be effective for testing the attributes of your displayed HTML content. If the styling is not embedded directly in the HTML code, Jest may miss it, as you previously mentioned. The farthest extent you can test without including styles inline is confirming the presence of the correct class name.

Perhaps exploring a testing framework designed for browser execution like Cypress could offer additional solutions. Check out Cypress visual testing guidelines for further insights.

Answer 5

Answer №3

Struggling with testing non-inlined CSS styles was a challenge I faced recently.

Using Gatsby to replicate a web page for experimentation led me to explore testing styles in jest without relying on a browser like playwright.

Fortunately, I came across jest-transform-css, which enabled me to successfully execute a proof of concept style unit test.

Although my setup involves CSS Modules and not SASS or SCSS, following the instructions provided in their README documentation allowed me to create tests like the one below:

import '@testing-library/jest-dom'

import * as React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import * as styles from "../../styles/navbar.module.css"
import { HomeNavButton } from "../buttons"

test('test HomeNavButton', () => {
    const testMessage = 'Test Message'
    render(<HomeNavButton href={"/test"} text={testMessage} className={styles.homeItem}/>)

    const div = screen.getByText(testMessage).parentElement
    const computedStyle = window.getComputedStyle(div)
    expect(computedStyle.margin).toBe('auto auto auto 0px')
}

In this test, the margin style of auto auto auto 0px is derived from the styles.homeItem.

Answer 6

Struggling with testing non-inlined CSS styles was a challenge I faced recently.

Using Gatsby to replicate a web page for experimentation led me to explore testing styles in jest without relying on a browser like playwright.

Fortunately, I came across jest-transform-css, which enabled me to successfully execute a proof of concept style unit test.

Although my setup involves CSS Modules and not SASS or SCSS, following the instructions provided in their README documentation allowed me to create tests like the one below:

import '@testing-library/jest-dom'

import * as React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import * as styles from "../../styles/navbar.module.css"
import { HomeNavButton } from "../buttons"

test('test HomeNavButton', () => {
    const testMessage = 'Test Message'
    render(<HomeNavButton href={"/test"} text={testMessage} className={styles.homeItem}/>)

    const div = screen.getByText(testMessage).parentElement
    const computedStyle = window.getComputedStyle(div)
    expect(computedStyle.margin).toBe('auto auto auto 0px')
}

In this test, the margin style of auto auto auto 0px is derived from the styles.homeItem.

Testing styling with Jest - a comprehensive guide

Answer №1

Answer №2

Answer №3

Similar questions

utilize rows as columns in a table

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Respond.min.js is specifically optimized for compatibility with IE 8 emulation mode within IE 11

Directly download a file from an S3 bucket to the React client without the need to route it through a Node.js server

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Creating Custom GTK Themes using CSS3

Having trouble changing the color of the MUI TextField component?

Using CSS to position elements absolutely while also adjusting the width of the div

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

Error in using TypeScript while subscribing to and rendering meshes imported through GLTF due to lack of context

Difficulty displaying list items/links in Bootstrap Navbar

Mastering CSS positioning and perfect alignment

Interacting between React and Express with CKEditor 5: How to send a request

Verify the user's admin role before granting access to a specific page in a web application built with React, Express, NodeJS, and

Using the ProtectedRoutes component and implementing redux useSelector() concept

What is the best way to stretch my background image to cover the entire screen?

Keep the animation keyframes looping endlessly

Utilizing Next.js routing to accommodate two distinct subdomains on a single website

Begin the Material UI Datepicker from the first day of the upcoming month

What is causing the button to only respond on the second click in reactjs?