我在用 jest 运行测试时遇到以下错误。

console.error
    Error: Could not parse CSS stylesheet
        at exports.createStylesheet ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
        at HTMLStyleElementImpl._updateAStyleBlock ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
        at HTMLStyleElementImpl._childTextContentChangeSteps ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
        at HTMLStyleElementImpl._insert ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:832:14)
        at HTMLStyleElementImpl._preInsert ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:768:10)
        at HTMLStyleElementImpl._append ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:868:17)
        at HTMLStyleElementImpl.appendChild ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:610:17)
        at HTMLStyleElement.appendChild ([PERSONAL_PATH]/node_modules/jsdom/lib/jsdom/living/generated/Node.js:395:60)
        at StyleSheet.insert ([PERSONAL_PATH]/node_modules/@emotion/sheet/dist/sheet.cjs.dev.js:121:11)
        at Object.insert ([PERSONAL_PATH]/node_modules/@emotion/cache/dist/cache.cjs.dev.js:168:19) {width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ[BLOB]== */

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:38:63)
      at HTMLStyleElementImpl._updateAStyleBlock (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
      at HTMLStyleElementImpl._childTextContentChangeSteps (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
      at HTMLStyleElementImpl._insert (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:832:14)
      at HTMLStyleElementImpl._preInsert (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:768:10)

我试过在我的 packages.json 上设置一个 jsdom 版本，也试过更新 jest 包。没有改变错误。它实际上并没有导致测试失败，但是它污染了 jest 输出。
如果需要更多的细节，请在评论中问比我编辑这个问题。

编辑

下面是测试组件的sass文件：

$spacing-medium: 2.4rem
$spacing-small: 1.6rem
$color-green: #3aa537
$color-white: #ffffff
$color-super-pale-gray: #f0f0f0
$color-pale-gray: #e6e6e6
$color-border-pale-gray: #b3b3b3
$tundora: #4d4d4d
$boulder: #757575
$electric-blue: #2251ff
$font-size-large: 1.6rem
$font-family-regular: "Arial", sans-serif
$font-family-bold: "Arial Bold", sans-serif
$[PRIVATE]-sans-regular-font-family: '[PRIVATE] Sans Regular', $font-family-regular
$[PRIVATE]-sans-medium-font-family: '[PRIVATE] Sans Medium', $font-family-bold
$font-size-medium: 1.4rem

@font-face
  font-family: [PRIVATE] Sans Medium
  src: url('https://cdn.[PRIVATE].com/assets/fonts/web/[PRIVATE]Sans-Medium.woff2') format('woff2')

@font-face
  font-family: [PRIVATE] Sans Regular
  src: url('https://cdn.[PRIVATE].com/assets/fonts/web/[PRIVATE]Sans-Regular.woff2') format('woff2')

.margin-cell
  margin-left: -12px

.active
  color: $color-green
  font-family: $[PRIVATE]-sans-medium-font-family
  margin-left: -12px

section
  margin: 1rem 0

  nav.sub-navigation
    background-color: $color-white
    padding: $spacing-medium

    a.sub-navigation-active
      display: inline-flex
      color: $electric-blue
      font-size: $font-size-large
      font-family: $[PRIVATE]-sans-medium-font-family
      text-decoration: none
      border-bottom: 4px solid $electric-blue
      padding-bottom: 1rem

  div.grid-container
    padding: $spacing-small 0 $spacing-small 0
    font-size: $font-size-medium
    background-color: $color-white
    display: grid

    .group-key
      font-family: $[PRIVATE]-sans-medium-font-family
      color: $tundora
      margin-bottom: 10px

    .input-style
      width: 100%
      font-family: $[PRIVATE]-sans-regular-font-family
      height: 30px
      padding: 0 $spacing-small
      color: $tundora
      font-size: $font-size-medium

    .group-divider
      padding: $spacing-small 10px $spacing-small 10px

    .advanced-configurations-container
      width: 100%
      font-size: $font-size-medium

    .advanced-configurations-header
      font-size: $font-size-medium
      color: $electric-blue
      width: unset

  div.info-group
    padding: 0 0 $spacing-small $spacing-medium
    font-size: 1.4rem
    background-color: $color-white
    border-top: 2px solid $color-super-pale-gray
    display: grid
    grid-template-columns: 1fr 1fr

    div.group-subsection
      display: grid
      padding: 0.8rem 0
      margin: 10px 25px 10px 0
      height: 50px
      &.variable-height
        height: unset
        min-height: 50px

    .group-key
      font-family: $[PRIVATE]-sans-medium-font-family
      color: $tundora
      margin-bottom: 10px

    .info-group-internal
      display: grid
      grid-template-columns: 1fr 1fr

  .icons-holder
    display: flex
    justify-content: center
    gap: 26px

.tab
  margin-top: $spacing-medium

.filter-wrapper
  padding: $spacing-small $spacing-medium $spacing-small $spacing-medium
  background-color: $color-white
  border-top: 1px solid $color-pale-gray

.search-input
  width: 300px
  height: 32px

.modal-form

  .form-row
    display: flex
    margin: $spacing-medium 0
    gap: $spacing-medium

    > .form-column
      flex: 1

      .input-wrapper
        height: 32px

        textarea
          //border: $color-pale-gray solid 1px
          color: $tundora
          height: 24px
          min-height: 9rem
          overflow: hidden
          padding: 10px
          resize: none

    .question-label
      color: $tundora
      font-family: $[PRIVATE]-sans-medium-font-family
      display: block
      font-weight: bold
      margin-bottom: 10px
      font-size: 1.4rem

下面是我的 jest.config.js：

module.exports = {
  clearMocks: true,
  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
  coverageDirectory: 'coverage',
  coveragePathIgnorePatterns: [
    '/node_modules/',
    'src/index.tsx',
    'src/temp/',
    'src/types/',
    'src/helpers/testHelper.ts',
    'src/helpers/constants.ts',
    'src/pages/Errors/*',
  ],
  coverageThreshold: {
    global: {
      branches: 90,
      functions: 90,
      lines: 90,
      statements: 90,
    },
  },
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx'],
  moduleNameMapper: {
    '\\.(css|scss|sass)$': 'identity-obj-proxy',
    '\\.svg$': '<rootDir>/__mocks__/genericMock.js',
    '^@src/(.*)$': '<rootDir>/src/$1',
    '^@helpers/(.*)$': '<rootDir>/src/helpers/$1',
    '^@appConfig(.*)$': '<rootDir>/config/application/appConfigTypes.ts',
  },
  preset: 'ts-jest',
  setupFilesAfterEnv: ['./src/helpers/jestHelper.ts'],
  testEnvironment: 'jsdom',
  testMatch: ['**/*.(test|spec).(ts|tsx)'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  transformIgnorePatterns: ['node_modules/(?!(react-native|[PRIVATE]|lodash)/)'],
};

更新

我已经开始从我正在测试的组件中分离出一些东西，到了只有一个组件的地步。所以我发现一个来自第三方库的日期选择器导致了这个问题。我克隆了它，运行了他们的测试，注意到他们在测试中使用了另一个库来呈现组件。发现他们也有 testing-library/react，我用它创建了另一个测试来呈现，但没有成功重现错误。有人对我下一步的尝试有什么建议吗？我的想法快用完了。

这里有一个未解决的问题：https://github.com/jsdom/jsdom/issues/2230，建议您将jsdom配置更改为：

const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const virtualConsole = new jsdom.VirtualConsole();
virtualConsole.on("error", () => {
  // No-op to skip console errors.
});
const dom = new JSDOM(``, { virtualConsole });

（直接复制自那个git问题）。
同样的答案也可以在这里找到：JSDOM: Could not parse CSS stylesheet .
这里还提到了另一个问题，https://github.com/styled-components/styled-components/issues/1931，似乎将多行注解改为单行注解解决了一些人的问题。
我相信jsdom没有那么好的CSS支持，或者它似乎在试图解析CSS时遇到了一些奇怪的事情。
然而，我不认为解决方案是解析CSS无论如何，你应该使用jest转换或moduleNameMapper来模拟css和导入一个空对象，没有理由测试样式。
根据jest文档https：//jestjs.io/docs/webpack#mocking-css-modules，您可以使用moduleNameMapper：

"moduleNameMapper": {
  "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
  "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
}

然后在fileMock.js中，您可以只导出一个空对象。
也可以使用变换：

"transform": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
}

然后在fileTransformer.js文件中，您也可以只导出一个空对象。

3条答案

按热度按时间

wgx48brx1#

赞(0）回复(0）举报 2023-03-20

mlnl4t2r2#

在Jest中使用identity-obj-proxy来转换scss以仅用于测试：NPM安装身份-对象-代理。
npm i -D identity-obj-proxy .
另请参见以下答案：https://stackoverflow.com/a/63638444/11067065 .

dced5bon3#

弹出错误消息...
由于样式表使用[jsdom] CSS解析器不支持的（合法）功能。源代码关于GitHub问题的注解
在同一个线程中，有一个解决方案对我很有效，我稍微修改了一下：

// in setupTests.js
const originalConsoleError = console.error
console.error = function (msg) {
  if (msg.startsWith('Error: Could not parse CSS stylesheet')) return
  originalConsoleError(msg)
}

控制台,error错误：无法解析CSS样式表

编辑

更新

3条答案

相关问题

热门标签

最新问答