module.scss in jest

[hollow meadow]

I want to test my components using jest @testing-library/react

and in some tests I need to check the component styles, but because we have .module.scss files,
the styles that are passed through the classes are not assigned

how do i fix this
how do I check/know what styles the components have when checking via jest @testing-library/react

sample code:

menu.test.tsx
test(test, () => {
const { getByTestId } = render(<Menu items={itemsNoIcon} />);

const menu_items = getByTestId('menu__items');

expect(menu_items).toBeInTheDocument();
expect(menu_items).not.toBeVisible();

});

snippet from menu.tsx
<div
data-testid='menu__items'
className={cn(st.menuWrapper, { [st.menuWrapper_open]: isMenuOpened })})}
/>

menu.module.scss snippet
.menuWrapper {
@include shadow('area');
@include transition((opacity, visibility));
border-radius: 4px;
z-index: 1;
padding: 40px 4px 8px 8px 4px;
position: absolute;
display: flex;
flex-direction: column;
background-color: $white;
right: -4px;
top: -5px;
opacity: 0;
visibility: hidden;
cursor: default;

&_open {
opacity: 1;
visibility: visible;
}
}

[lost thistle]

Hi @hollow meadow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To test styles in your components when using Jest and @testing-library/react, you need to mock your SCSS modules. This is because Jest runs in a Node environment and doesn't understand SCSS or CSS imports.

In the Next.js configuration for Jest, you can see how to handle CSS imports (with and without CSS modules) and image imports. Here's the relevant part of the configuration:

moduleNameMapper: {
  // Handle CSS imports (with CSS modules)
  '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

  // Handle CSS imports (without CSS modules)
  '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/testing))

In this configuration, CSS Modules are being mocked with identity-obj-proxy, a module that returns the import as-is, which is useful for getting the class names in your tests. For regular CSS imports, a manual mock is used. You can create a styleMock.js file in a __mocks__ directory in your project with the following content:

module.exports = {};

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/testing))

This will allow Jest to run without encountering errors when it encounters CSS imports. However, it won't provide the actual styles for your components. Jest is primarily used for testing JavaScript logic, and it doesn't fully support testing styles.

If you want to test styles, consider using a different tool that supports this, such as Cypress (https://www.cypress.io/) or Puppeteer (https://pptr.dev/). These tools run in a browser environment and can accurately test styles.

For checking if an element is visible in your tests, you can use the .toBeVisible() matcher from @testing-library/jest-dom. This doesn't check the actual styles, but it checks if the element is rendered in a way that a user can see it.

expect(menu_items).not.toBeVisible();

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/testing))

Remember to import @testing-library/jest-dom in your test file to use this matcher:

import '@testing-library/jest-dom'

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/testing))

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hollow meadow kapa.ai is still learning and improving, please let us know how it did by reacting below

[hollow meadow]

@lost thistle how do you mock the styles?

[lost thistle]

Let me check the knowledge base for you. One moment! :books:

---

To mock styles in Jest, you need to create mock files that Jest will use when it encounters CSS or SCSS imports. Here's how you can do it:

1. Create a __mocks__ directory in your project's root directory.

2. Inside the __mocks__ directory, create two files: fileMock.js and styleMock.js.

3. In fileMock.js, you can export an object with some mock data. This file will be used when Jest encounters image imports. Here's an example:

module.exports = {
 src: '/img.jpg',
 height: 24,
 width: 24,
 blurDataURL: 'data:image/png;base64,imagedata',
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/testing))

4. In styleMock.js, you can export an empty object. This file will be used when Jest encounters CSS imports. Here's an example:

module.exports = {}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/testing))

5. In your Jest configuration file (jest.config.js), you need to tell Jest to use these mock files when it encounters CSS or image imports. Here's how you can do it:

moduleNameMapper: {
 // Handle CSS imports (with CSS modules)
 '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
 
 // Handle CSS imports (without CSS modules)
 '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
 
 // Handle image imports
 '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/optimizing/testing))

This configuration tells Jest to use identity-obj-proxy for CSS Modules, and the styleMock.js and fileMock.js files for regular CSS and image imports, respectively.

Remember to replace <rootDir> with the path to your project's root directory.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: