Question

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

Answer 1

如果您的堆栈中有Babel，则可以使用来自Babel的另一个包解决此问题：babel-jest

只需执行"moduleNameMapper": { "^.+\\.(css|less|scss)$": "babel-jest" }并在您的jest设置文件中添加：

function isUnique(cif) {
    countClients(cif).then(function(count) {
        return (count == 0);
    });
}

function countClients(cif) {
    return axios.get('/api/clients?cif=' + cif)
        .then(function(response) {
            let clients = response.data;
            return clients.length;
        })
        .catch(function(error) {
            console.log(error);
            return false;
        });
}

Answer 2

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

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

安装它

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

并添加你的开玩笑设置：

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

Answer 3

我一直在寻找类似问题的解决方案，而我一直在上面寻找解决方案。

起初我似乎并没有为我工作，但我意识到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"
  }
};

Answer 4

之前没有以下信息，因此我制作了pull request on facebook/jest and it was merged。

我想在模块中导入存根样式，例如：

// 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规则之前解析，因此样式文件已加载为正常的模块，会使测试崩溃。

解决方案是首先制定具体规则。

moduleNameMapper: {
    '^.*\\.scss$': '<rootDir>/test/unit/stubs/style.js',
    '^@/(.*)$': '<rootDir>/src/$1',
}

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

4 个答案: