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

Question

我正在尝试React使用Jest+ 测试我的组件Enzyme,但是当我的组件有SASSfile(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';,测试将是okey.

如果导入样式,如何React用Jest+`Enzyme` 测试组件

Answer 1

如果你的堆栈中有Babel,你可以使用Babel:babel-jest中的另一个包解决这个问题

只需npm i --save-dev babel-jest在您的jest设置文件中添加:

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

Answer 2

您可以通过moduleNameMapper在jest设置中定义来为此类文件定义模拟 .

我们正在使用identity-obj-proxy.所以安装它

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

并添加你的开玩笑设置:

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

Answer 3

以下信息之前不可用，因此我在facebook/jest上提出了 Pull 请求，并将其合并。

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

// 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',
}

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"
  }
};