使用 Jest 测试苗条组件时忽略 scss答案

【问题标题】：Ignore scss while testing svelte components with Jest使用 Jest 测试苗条组件时忽略 scss
【发布时间】：2020-10-05 23:39:34
【问题描述】：

问题：我想用 jest 测试苗条的组件，但我无法这样做，因为我无法忽略组件内部提到的 scss 样式。有没有办法绕过scss。到目前为止，我的方法如下：-

jest.config.js

module.exports = {
    transform: {
        '^.+\\.svelte$': 'svelte-jester',
        '^.+\\.js$': 'babel-jest',
    },
    moduleFileExtensions: ['js', 'svelte'],
    moduleDirectories: ['node_modules', 'src'],
    moduleNameMapper: {
        "^.*\\.scss$": "SCSSStub.js"
    }
}

babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                },
            },
        ],
    ],
}

SCSSStub.js

module.exports = {};

除了这种方法，我尝试了 identity-obj-proxy 以及添加

moduleNameMapper: { '^.+\\.(css|less|scss)$': 'babel-jest',},

到 jest.config.js。他们都没有工作。

【问题讨论】：

您对此是否有任何错误，或者它根本不起作用？如果有错误，您能否也分享错误堆栈跟踪？
当我按照提到的方式配置 jest 并执行测试时，我会不断收到解析错误，因为测试无法绕过我的 svelte 文件中的 scss。当我从 svelte 文件中删除 scss 时，测试将按预期执行。

标签： javascript css unit-testing jestjs svelte

【解决方案1】：

问题在于您配置moduleNameMapper 的方式。正则表达式会寻找类似filename\.scss

有一个额外的正斜杠，因此正斜杠将被转义而不是点，导致只有在扩展之前有正斜杠时才会发生模拟。

将您的正则表达式更改为^.+\.(css|less|scss)$，它应该可以按预期工作。

【讨论】：

您能否分享您的 src 和测试文件以及错误消息。

【解决方案2】：

您需要让svelte-jester 运行预处理器。根据their README：

jest.config.js

// replace this line
'^.+\\.svelte$': 'svelte-jester',
// with this one
'^.+\\.svelte$': ['svelte-jester', {preprocess: true}],

那么您可能会遇到没有svelte.config.js 文件的问题，如果您正在运行预处理器，svelte-jester 期望您拥有该文件。 discussion for that is here 和 solution to it is here。为了更好地衡量，这是我的解决方案：

svelte.config.js

import autoPreprocess from 'svelte-preprocess';

const preprocessOptions = {
  scss: {
    // your scss preprocess options here
  }
};

const preprocess = autoPreprocess(preprocessOptions);

export {
  preprocess,
  preprocessOptions
};

rollup.config.js

// ... snip
import {preprocess} from './svelte.config';
// ... snip
    svelte({
      preprocess,
      // ... other svelte options
    }),
// ... snip

编辑：如果您遇到与本机模块相关的错误，那么最简单的解决方案是将 svelte.config.js 和 rollup.config.js 切换为 commonjs 语法。我只在特定的 Docker 构建中看到了这一点，而不是在我的本地机器上，所以希望上述内容通常是正确的。

【讨论】：