Запуск реагирующего модульного теста с помощью scss

У меня есть компонент реакции, который использует файл scss. Файл 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('../../../stylesheets/images/Search.svg');

2 | .srchBoxContaner { | ^ 3 | прокладка: 1,5 бэр 1,5 бэр 0 бэр 1,5 бэр; 4 | }

Как я могу это исправить.


jestjs react-redux enzyme
person tmp dev    schedule 26.06.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы, вероятно, на самом деле не хотите пытаться загрузить файл 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 = {}
person Lewis Chung    schedule 27.06.2017