Running react unit test with scss

Question

I have a react component that is using a scss file. The scss file is as follows

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

The react component is a standard component that has the following import

import styles from './IncrementalSearch.scss';

I am using Jest, Enzyme, and Sinon. My unit test is as follows

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

When I run the test I get the following error

Unexpected token (2:0) 1 | $searchImage: url('../../../stylesheets/images/Search.svg');

2 | .srchBoxContaner { | ^ 3 | padding: 1.5rem 1.5rem 0rem 1.5rem; 4 | }

How can I fix this.

Answer 1

You probably don't actually want to try loading the scss file in your test environment -- because when you do, Node will try to parse the scss file as javascript.

You need to mock out scss files in your test environment. You can use moduleNameMapper to do that: 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 = {}