使用单元测试（Jest）问题运行 cypress

Question

主要问题： 我们的团队希望使用 cypress 仪表板来覆盖项目的测试。

我们同时使用 cypress 测试和单元测试来测试我们的代码（Jest + React 测试库）。

主要问题是在运行单元测试的时候，出现了一个和jest里面的DOM构造有关的错误。

我们收到 webpack 配置不正确的错误：

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

能否请您告诉我们为什么会出现这样的问题以及可能的解决方案 赛普拉斯版本 7.5.0

Answer 1

这看起来可能是CSS文件的结构有问题，

参考Custom properties (--*): CSS variables

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

你有--background 的:root 定义吗？即

:root {
  --background: ...;
}

Cypress 本身似乎理解 CSS 变量，参考见How to Test an Application that Changes a CSS Variable