导入带有SASS文件的测试组件时出现语法错误 [英] Syntax Error when test component with SASS file imported

问题描述

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

I'm trying test my React component with Jest + Enzyme, but when my component has SASS file (scss), is occurring SyntaxError.

这是我的SASS文件内容:

This is my SASS file content:

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

然后我将其导入我的组件中

And I just import that in my component:

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;

以下是我的测试错误消息:

Following error message of my test:

如果我评论import './userBox.scss';，则测试会正常.

If I comment the import './userBox.scss';, test will be okey.

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

How to can I test React component with Jest + ‵Enzyme` when has style imported

推荐答案

您已经通过定义

You have do define a mock for this kind of file by define moduleNameMapper in your jest settings.

我们正在使用 identity-obj-proxy .因此，使用

We are using identity-obj-proxy. So install it with

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

并添加您的笑话设置:

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

这篇关于导入带有SASS文件的测试组件时出现语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！