用scss运行反应单元测试

Question

我有一个使用scss文件的react组件。 scss文件如下

$searchImage: url('../../../stylesheets/images/Search.svg');
.srchBoxContaner {
    padding: 1.5rem 1.5rem 0rem 1.5rem;
}

react组件是具有以下导入的标准组件

import styles from './IncrementalSearch.scss';

我正在使用Jest，Enzyme和Sinon。我的单元测试如下

describe('<IncrementalSearch />', () => {
    it('calls componentDidMount', () => {
        sinon.spy(IncrementalSearch.prototype, 'componentDidMount');
        const wrapper = mount(<IncrementalSearch />);
        expect(IncrementalSearch.prototype.componentDidMount.calledOnce).to.equal(true);
    });
});

当我运行测试时，我收到以下错误

意外的令牌（2：0）1 | $ searchImage：url（'../../../ stylesheets / images / Search.svg'）;

2 | .srchBoxContaner {| ^ 3 |填充：1.5rem 1.5rem 0rem 1.5rem; 4 | }

我怎样才能解决这个问题。

Answer 1

您可能实际上并不想尝试在测试环境中加载scss文件 - 因为当您这样做时，Node会尝试将scss文件解析为javascript。

您需要在测试环境中模拟scss文件。你可以使用moduleNameMapper来做到这一点：https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string

EG

"moduleNameMapper": {
    "\\.(css|scss)$": "<rootDir>/tests/config/jest/styleMock.js"
  },

styleMock.js

module.exports = {}