Jest vs React: module exports and "Jest encountered an unexpected token"

Question

I am having problems getting React and Jest to work together which seems odd as I thought they both came from a similar origin. My issue is around the way that the class I'm testing is being exported.

I have an ArticleService class which I could use happily in React when it was exporting as default:

class ArticleService {
    constructor(articles) {
        this.articles = articles;
        if (!this.articles) {
        this.articles =
            [//set up default data....
            ];
        }
    }
    getAll(){
        return this.articles;
    }
  }

//module.exports = ArticleService;//Need this for jest testing, but React won't load it
export default ArticleService;// Can't test with this but React will load it. 

Here is how it is being called in my React app (from my HomeComponent):

import ArticleService from './services/xArticleService';

and is being used happily as

const articles = (new ArticleService()).getAll();

However my tests will not run. Here is my test with an import of the class file:

import ArticleService from "../services/xArticleService";

it('correctly gets all summaries', () => {
  var summaries = getFakeSummaryList();
  var testSubject = new ArticleService(summaries);
  var actual = testSubject.getAll();
  expect(actual.length).toEqual(10);
});

and I get

FAIL src/tests/ArticleService.test.js
Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

U:\...\src\tests\ArticleService.test.js:2
import ArticleService from "../services/xArticleService";
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

If (in the test) I swop

import ArticleService from "../services/xArticleService";

for

const ArticleService = require('../services/xArticleService');

and edit the export in xArticleService.js to

module.exports = ArticleService;//Need this for jest testing, but React won't load it

then the tests are executed but React will not load it:

Attempted import error: './services/xArticleService' does not contain a default export (imported as 'ArticleService').

I have a default set up, creating using create-react-app. I've not changed any .babelrc. Can anyone see where I am going wrong? Thanks

UPDATE:

I have made the changes to .babelrc suggested in the accepted answer to the possible duplicate of this but this has made no change to the output.