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

我正在尝试使用React + Jest测试我的Enzyme组件，但是当我的组件具有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';，那么测试会很好。

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

最佳答案

您已经通过在玩笑设置中定义 moduleNameMapper 来为此类文件定义了一个模拟文件。

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

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

并添加您的笑话设置:

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