导入 SASS 文件的测试组件时出现语法错误

Question

我正在尝试使用 Jest + Enzyme 测试我的 React 组件，但是当我的组件有 SASS 文件 (scss) 时，是发生 SyntaxError.

这是我的 SASS 文件内容：

.user-box {
  width: 50px;
  height: 50px;
}

我只是将其导入到我的组件中：

import React from 'react';

import './userBox.scss';

class MyComponent extends React.Component {
    render() {
        const style = {
            borderRadius: '99px'
        };
        return (
            <div>Hello World</div>
        );
    }
}

export default MyComponent;

我测试的错误信息如下：

如果我评论 import './userBox.scss';，测试就可以了。

如何在导入样式时使用 Jest + ‵Enzyme` 测试 React 组件

Answer 1

您确实通过在您的 jest 设置中定义 moduleNameMapper 为此类文件定义了一个 mock。

我们正在使用 identity-obj-proxy。所以用

安装它

npm install identity-obj-proxy --save-dev

并添加您的笑话设置：

"moduleNameMapper": {
    "^.+\.(css|less|scss)$": "identity-obj-proxy"
  }

Answer 2

如果你有 Babel in your stack, you can fix this in the right way using babel-jest

只需执行 npm i --save-dev babel-jest 并在您的 jest 设置文件中添加：

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

Answer 3

之前没有下面的资料，所以做了一个pull request on facebook/jest and it was merged.

我想存根模块中导入的样式，例如：

// module.js
import Style from '@/path/to/style.scss';
import App from './App';

所以我创建了一个样式存根文件：

// test/unit/stubs/style.js
module.exports = '.style-stub{color:red;}';

在弄乱了以下 jest.conf.js 之后：

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/', // '@' alias
    '^.*\.scss$': '<rootDir>/test/unit/stubs/style.js',
}

我发现 moduleNameMapper 顺序很重要。 @ 别名规则在我的 .scss 规则之前解析，所以样式文件作为普通模块加载，会使测试崩溃。

解决办法是把具体规则放在第一位。

moduleNameMapper: {
    '^.*\.scss$': '<rootDir>/test/unit/stubs/style.js',
    '^@/(.*)$': '<rootDir>/src/',
}

Answer 4

我一直在寻找类似问题的解决方案，并且不断遇到上述解决方案。

起初我似乎没有为我工作，但我意识到 Jest 只是忽略了我在 package.json 中添加到 "jest" 的任何内容。我的设置包括一个 jest.config.js 文件。我发现如果我在那里添加 "moduleNameMapper" ，它就会起作用。所以现在我的 jest.test.config.js 看起来像这样：

module.exports = {
  setupFiles: ["<rootDir>/testSetup.js"],
  moduleNameMapper: {
    "^.+\.(css|scss)$": "identity-obj-proxy",
    "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/fileMocks.js"
  }
};

导入 SASS 文件的测试组件时出现语法错误

Syntax Error when test component with SASS file imported

javascript

unit-testing

reactjs

jestjs

enzyme