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

【问题标题】：Syntax Error when test component with SASS file imported导入 SASS 文件的测试组件时出现语法错误
【发布时间】：2017-04-23 17:49:40
【问题描述】：

我正在尝试使用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 组件

【问题讨论】：

标签： javascript unit-testing reactjs jestjs enzyme

【解决方案1】：

您必须通过在您的 jest 设置中定义 moduleNameMapper 来为此类文件定义一个模拟。

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

安装它

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

并将其添加到您的笑话设置中：

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

【讨论】：

我不明白这个配置是什么，但正在工作！非常感谢，我会研究这个
谢谢。你刚刚救了我，我在上周几乎一整天都在寻找解决方案！
我尝试了所有这些选项，但没有人为我工作。好沮丧

【解决方案2】：

如果您的堆栈中有Babel，您可以使用babel-jest 以正确的方式解决此问题

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

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

【讨论】：

我已经安装了babel-jest，所以这对我来说更容易并且工作正常。
我不使用 babel。我可以将它仅用于这种情况吗？我试过这个，但不工作。我还需要其他依赖吗？
如果你没有 babel，最好按照接受的答案中的解决方案。

【解决方案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/$1', // '@' alias
    '^.*\\.scss$': '<rootDir>/test/unit/stubs/style.js',
}

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

解决办法是先把具体的规则放在前面。

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

【讨论】：

【解决方案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"
  }
};

【讨论】：