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

IT技术 javascript unit-testing reactjs jestjs enzyme
2021-04-24 03:10:48

我正在尝试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;

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

Jest 测试错误信息

如果我评论import './userBox.scss';，测试就可以了。

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

4个回答

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

只需执行npm i --save-dev babel-jest并在您的笑话设置文件中添加：

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

您已经通过moduleNameMapper在您的笑话设置中定义来为此类文件定义模拟 。

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

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

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

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

我一直在寻找类似问题的解决方案，并且不断遇到上述解决方案。

起初我似乎并不适合我，但我意识到 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"
  }
};

之前没有以下信息，所以我在facebook/jest上提出了一个pull request并将其合并。

我想存根module中导入的样式，例如：

// 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规则，这样的样式文件加载作为一个正常的module会崩溃的考验。

解决的办法是把具体的规则放在首位。

moduleNameMapper: {
    '^.*\\.scss$': '<rootDir>/test/unit/stubs/style.js',
    '^@/(.*)$': '<rootDir>/src/$1',
}
其它你可能感兴趣的问题
上一篇双挤出机打印机的两个热端是否必须处于同一高度？ 下一篇如何向（Marlin 固件）LCD 菜单添加菜单选项？