在使用Jest测试svelte组件时忽略scss

Question

问题：我想用jest测试svelte组件，但是无法这样做，因为我不能忽略组件中提到的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 = {};

除了这种方法之外，我还尝试了身份-obj-代理以及添加

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

敬jest.config.js。他们都不起作用。

Answer 1

问题在于您配置moduleNameMapper的方式。regex会寻找类似于filename\.scss的东西

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

将regex更改为^.+\.(css|less|scss)$，它应该会像预期的那样工作。

Answer 2

您需要让svelte-jester运行预处理程序。根据他们的自述

jest.config.js

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

然后，您可能会遇到没有svelte.config.js文件的问题，如果您正在运行预处理器，svelte-jester希望您拥有这个文件。关于这个的讨论就在这里和解决办法就在这里。为了更好地衡量，以下是我的解决方案：

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构建中才看到这一点，而不是在我的本地机器上，所以希望上面的内容总体上是正确的。