代码之家  ›  专栏  ›  技术社区  ›  Arshpreet Wadehra

ParseError:需要Colon(具有scss风格的svelte)svelte单元测试

  •  1
  • Arshpreet Wadehra  · 技术社区  · 3 年前

    我正在尝试为使用SCSS作为默认样式的组件编写一个测试。但测试抛出了无法理解SCSS的错误

    myComponent.svelte

    <div>Hello <span>world</span></div>
    <style>
    div {
     padding: 20px;
     span {
      font-weight: bold;
     }
    }
    </style>
    

    测试文件

    // mycomponent.test.js
    import { render } from '@testing-library/svelte';
    import MyComponent from './MyComponent.svelte';
    ...
    const { component } = render(MyComponent, {});
    ...
    

    Jest配置

    module.exports = {
      transform: {
        '^.+\\.js$': 'babel-jest',
        '^.+\\.svelte$': ['svelte-jester', { preprocess: true, debug: true }],
      },
      moduleFileExtensions: ['js', 'svelte'],
      roots: ['<rootDir>/app/modules'],
      modulePaths: ['<rootDir>/app/modules'],
      moduleDirectories: ['node_modules', 'app/modules'],
      setupFilesAfterEnv: [
        '<rootDir>/app/modules/tests/setupTest.js',
        '@testing-library/jest-dom/extend-expect',
      ],
      clearMocks: true, // Automatically clear mock calls and instances before every test.
    };
    

    我正在将默认样式设置为 SCSS 在苗条的配置中

    svelt.config.js

    const preprocess = require('svelte-preprocess');
    
    module.exports = {
      preprocess: preprocess({ defaults: { style: 'scss' } }),
    };
    

    错误堆栈

    Colon is expected
    4:     padding: 20px;
    5: 
    6:     span {
                  ^
    7:       font-weight: bold;
    8:     }
    ParseError: Colon is expected
    
          at error (node_modules/svelte/src/compiler/utils/error.ts:25:16)
          at Parser$1.error (node_modules/svelte/src/compiler/parse/index.ts:101:3)
          at Object.read_style [as read] (node_modules/svelte/src/compiler/parse/read/style.ts:31:11)
          at tag (node_modules/svelte/src/compiler/parse/state/tag.ts:189:27)
          at new Parser$1 (node_modules/svelte/src/compiler/parse/index.ts:53:12)
          at parse (node_modules/svelte/src/compiler/parse/index.ts:218:17)
          at Object.compile (node_modules/svelte/src/compiler/compile/index.ts:93:14)
          at compiler (node_modules/svelte-jester/dist/transformer.cjs:135:32)
          at Object.processSync [as process] (node_modules/svelte-jester/dist/transformer.cjs:111:12)
          at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)
    

    复制克隆并运行此回购 https://github.com/rparsh/svelte-testing-scss

    0 回复  |  直到 3 年前
        1
  •  4
  •   dummdidumm    3 年前

    添加 lang="scss" <style> 标签

    <style lang="scss">
    </style>
    

    一般来说,由于此类问题,不再建议使用默认语言。您不能确定生态系统中的所有工具都支持读取默认值。这也是为什么从文档和 svelte-preprocess 现在打印一个警告,说明您不应该再使用它。