Jest + S CSS @import проблема (css модули) - PullRequest
Новая
       26

Jest + S CSS @import проблема (css модули)

0 голосов
/ 02 февраля 2020

Я попытался настроить свой Jest Runner для правильной работы с s css @impport statatment (внутри css модулей в моем приложении React). но, к сожалению, я получаю ошибку каждый раз, когда запускаю тестовый скрипт. Я пробовал разные решения из похожих билетов StackOverflow, но это мне не помогло.

пример моей ошибки:

enter image description here

my jest.config. js: 

module.exports = {
transform: {
    "^.+\\.(jsx?|tsx?)$": "<rootDir>/.jest/transform.ts",
},
testURL: 'http://localhost:6006/',
testRegex: "((\\.|/)(test|spec))\\.(jsx?|tsx?)$",
preset: 'jest-puppeteer',
moduleFileExtensions: [
    "scss",
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
],
moduleDirectories: ["node_modules", "src"],
moduleNameMapper: {
    '\\.(jpg | ico | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | wav | mp3 | m4a | aac | oga)$ ': '<rootDir>/__mocks__/fileMock.js',
    '\\.(css | scss)$': 'identity-obj-proxy'
},
transformIgnorePatterns: ['<rootDir>/node_modules'],
setupFilesAfterEnv: [
    "<rootDir>/.jest/register-context.ts",
    "<rootDir>/.storybook/setupTests.ts"
]
};

transform.ts file: 

module.exports = require('babel-jest').createTransformer({
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' }, modules: 'commonjs' }],
        '@babel/preset-react',
        '@babel/preset-typescript',
    ],
    plugins: [
        'require-context-hook',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-transform-modules-commonjs'
    ],
});

1 Ответ

1 голос
/ 02 февраля 2020

Не используйте пробелы в регулярном выражении модуля отображения имени модуля. Например, вместо: 

moduleNameMapper: {
  '\\.(css | scss)$': 'identity-obj-proxy'
},

Используйте это: 

moduleNameMapper: {
  '\\.(css|scss)$': 'identity-obj-proxy'
},

Я никогда не использовал identity-obj-proxy, я не проверял это, но, как я мог читать о, это делает аналогичную задачу обычного файла сопоставления, как это: 

const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};
...