I have a React ponent that I am trying to write some tests around. I have broken it down to the simplest test possible.

jest.dontMock('../Overlay.react.js');

import React from 'react';
import ReactDOM from 'react-dom';

var Overlay = require('../Overlay.react.js'); // this is the culprit!

describe('Overlay', () => {
    it('should work', () => {
        expect(true).toEqual(true);
    });
});

When requiring the ponent I am trying to test, it seems to not be mocking its subponents. At the top of Overlay.react.js, I have the following import: import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react'; When running my test, I get the following error:

• SyntaxError: /Users/dev/work/react-prototype/src/ponents/root/routes/ponents/subset1/ponents/Overlay.react.js: /Users/dev/work/react-prototype/src/ponents/root/routes/ponents/loadingIndicator/LoadingIndicatorSpin.react.js: /Users/dev/work/react-prototype/src/ponents/root/routes/ponents/loadingIndicator/sass/style.sass: Unexpected token ILLEGAL

It seems like instead of mocking the ponents, it is going right down to the sub-ponent's sass file and throwing a fit. My understanding was that Jest mocks everything except for what you tell it to not mock.

What is the right way to formulate these tests so that sub-ponents do not cause jest to explode when being imported during a test?

I have a React ponent that I am trying to write some tests around. I have broken it down to the simplest test possible.

jest.dontMock('../Overlay.react.js');

import React from 'react';
import ReactDOM from 'react-dom';

var Overlay = require('../Overlay.react.js'); // this is the culprit!

describe('Overlay', () => {
    it('should work', () => {
        expect(true).toEqual(true);
    });
});

When requiring the ponent I am trying to test, it seems to not be mocking its subponents. At the top of Overlay.react.js, I have the following import: import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react'; When running my test, I get the following error:

• SyntaxError: /Users/dev/work/react-prototype/src/ponents/root/routes/ponents/subset1/ponents/Overlay.react.js: /Users/dev/work/react-prototype/src/ponents/root/routes/ponents/loadingIndicator/LoadingIndicatorSpin.react.js: /Users/dev/work/react-prototype/src/ponents/root/routes/ponents/loadingIndicator/sass/style.sass: Unexpected token ILLEGAL

It seems like instead of mocking the ponents, it is going right down to the sub-ponent's sass file and throwing a fit. My understanding was that Jest mocks everything except for what you tell it to not mock.

What is the right way to formulate these tests so that sub-ponents do not cause jest to explode when being imported during a test?

• javascript
• unit-testing
• reactjs
• jestjs

Share Improve this question Follow edited Dec 1, 2015 at 22:54 Cihan Keser 3,26155 gold badges3131 silver badges4343 bronze badges asked Dec 1, 2015 at 18:13 JimJim 4,6691616 gold badges5353 silver badges8080 bronze badges 8

• 2 Slightly opinionated but I'm just thinking ahead for you. Your going to be getting many of these types of errors using jest, additionally your going to be running into performance problems when you begin to test anything non-trivial. Take a look at some open issues of jest and evaluate if using mocha or jasmine would be a better choice for testing framework. – enjoylife Commented Dec 1, 2015 at 18:35
• Otherwise take a look at this question for more guidance. – enjoylife Commented Dec 1, 2015 at 18:41
• 1 @mattclemens Interesting. I've only really read about testing react ponents with jest, so that was the default. I will read up a bit... The question you linked to is more around having subponents passed to the ponent you are trying to test, rather than them being imported it seems. – Jim Commented Dec 1, 2015 at 18:49
• Oops, my bad for leading you an irrelevant question, I guess I picked up on that one in particular for the sub ponent aspect. – enjoylife Commented Dec 1, 2015 at 19:00
• What else are you using to run the tests besides Jest? Are you using a transpiler e.g. Babel? And (how) is the sass stuff referenced from the JS? – Matt Holland Commented Dec 5, 2015 at 0:09

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 4 +50

If you would require your SASS and LESS and CSS files in the main ponent instead of in each sub ponent you would not get this problem as you test the ponents on their own.

There are some other solutions mentioned in this issue report if you don't like the one I provided. Issue 334