0

I'm trying to test React component which has imported SASS with jest using gulp task. The issue here is that gulp-jest doesn't map module names (so it can't skip .scss files) and test fails (throws: "SyntaxError: Unexpected token *"). I have no idea why it behaves this way.

The strangest thing is that is works perfectly via "npm test" and jest-cli, but doesn't with "gulp test" for some reason.

Here is the component:

import React from 'react';
import '../../scss/App.scss';

export default class App extends React.Component {
  render() {
    return (
      <div className="main">
        <h1>Here we go!</h1>
      </div>
    )
  }
}

Here is the test:

import React from 'react';
import App from '../src/js/components/App';

describe('App', () => {
  test('should be a React component', () => {
    let instance = App.prototype instanceof React.Component;
    expect(instance).toBe(true);
  });
});

Here is the gulpfile:

var gulp = require('gulp');
var jest = require('gulp-jest').default;

gulp.task('test', () => {
  process.env.NODE_ENV = 'test';
  return gulp.src('test')
    .pipe(jest({
      config: {
        "transformIgnorePatterns": [
          "<rootDir>/dist/", "<rootDir>/node_modules/"
        ],
        "automock": false,
        "moduleNameMapper": {
          "\\.scss$": "<rootDir>/jestignore.js"
        }
      }
    }));
});

jestignore.js in the root directory just exports empty object.

I do have jest.config.js file exporting the exact configurations for npm test command (just wanted to simplify it for you by changing require() to config itself in the gulpfile).

Nikita Svetlov
  • 1
  • 1

1 Answers1

0

It's a known gulp-jest issue if you use jest 21: https://github.com/alansouzati/gulp-jest/issues/41. Downgrading to jest 20 should help.

SergeyS
  • 3,909
  • 2
  • 15
  • 17
  • Actually I used v20 in this project. I've tried to convert config into string but it didn't help. Hope this issue with gulp-jest has drawn attention with v21 release and be fixed soon. – Nikita Svetlov Sep 20 '17 at 13:04
  • True, passing config as json string to jest-gulp won't help. The problem is that jest-gulp modified passed config assuming it's an object which breaks the config string. – SergeyS Sep 21 '17 at 14:36