Running cypress with unit tests (Jest) problem

[Algoritm211]

Main problem: Our team wants to use a cypress dashboard to cover the project with tests. We use both cypress tests and unit tests to test our code (Jest + React Testing Library).

The main problem is that when running unit tests, an error occurs that is related to the construction of the DOM inside jest.

We are getting an error that the webpack is not configured correctly:

Error: Webpack Compilation Error
./src/components/Toast/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .toast_classes {
|   color: #ffffff;
|   --background: #1d201f;
 @ ./src/components/Toast/toast.ts 1:0-21
 @ ./src/redux/payments/action.ts
 @ ./cypress/integration/payments-action.test.ts
    at Watching.handle [as handler] (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:176:23)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:54:20
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:2818:7
    at done (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:464:33

Can you please tell us why such a problem may occur and there may be possible solutions

Cypress version 7.5.0