使用导入的 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

推荐答案

您已经通过define moduleNameMapper 在你的笑话设置中.

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 

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

and add it your jest setting:

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

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