Question

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

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

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

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（＆＃39; ../../../ stylesheets / images / Search.svg＆＃39;）;

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

e.g。

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

<强> styleMock.js

module.exports = {}

用scss运行反应单元测试

1 个答案: