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

Question

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

Answer 1

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

只需执行 npm i --save-dev babel-jest 并在你的 jest 设置文件中添加:

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