Почему Jest не может распарсить CSS модуля?

Question

[souhhhhh]

import { render, screen } from '@testing-library/react'
import { Button } from "./Button"
describe('Button', () => { 
    test('Button test', () => { 
        render(<Button>TEST</Button>);
        expect(screen.getByText('TEST')).toBeInTheDocument()
    })
})

import { classNames } from '../../../shared/lib/classNames/classNames';
import cls from './Button.module.scss'
import {ButtonHTMLAttributes, FC} from "react";

export enum ThemeButton {
    CLEAR = 'clear',
}

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>{
    className?: string;
    theme?: ThemeButton;
}

export const Button: FC<ButtonProps> = (props) => {
    const {
        className,
        children,
        theme,
        ...otherProps
    } = props;

    return (
        <button
            className={classNames(cls.Button, {[cls[theme]]: true}, [className])}
            {...otherProps}
        >
            {children}
        </button>
    );
};

const config = {
    clearMocks: true,
    testEnvironment: 'jsdom',
    coveragePathIgnorePatterns: ['\\\\node_modules\\\\'],
    moduleDirectories: ['node_modules'],
    moduleFileExtensions: [
      'js',
      'mjs',
      'cjs',
      'jsx',
      'ts',
      'tsx',
      'json',
      'node'
    ],
    "modulePaths": [
      "<rootDir>",
    ],
    testMatch: [
      '<rootDir>src/**/*(*.)@(spec|test).[tj]s?(x)'
    ],
    rootDir: '../../',
    setupFilesAfterEnv: ['<rootDir>config/jest/setupTest.ts'],
    moduleNameMapper: {
    "\\.(scss)$": "identity-obj-proxy"
  }

};

export default config;

.Button {
^

SyntaxError: Unexpected token '.'

1 | import { classNames } from '../../../shared/lib/classNames/classNames';
> 2 | import cls from './Button.module.scss'

Comments

[WbICHA]

Потому что цсс модули.

[souhhhhh]

WbICHA, ?

[WbICHA]

souhhhhh, у тебя в ошибке всё есть, я тебе ещё и написал с чем именно проблема. Чего тебе ещё нехватает?

Answer 1

[Дмитрий Беляев]

https://jestjs.io/docs/webpack#handling-static-assets

В обычной сборке у Вас scss файлы собираются бандлером вроде webpack.
А в jest никакого бандлера нет.