Jest vs React: экспорт модулей и «Jest обнаружил неожиданный токен»

Question

У меня проблемы с тем, чтобы заставить React и Jest работать вместе, что кажется странным, так как я думал, что они оба были схожего происхождения.Моя проблема заключается в том, как экспортируется класс, который я тестирую.

У меня есть класс ArticleService, который я мог бы с радостью использовать в React при его экспорте по умолчанию:

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. 

Вот как он вызывается в моем приложении React (из моего HomeComponent):

import ArticleService from './services/xArticleService';

и успешно используется как

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

Однако мои тесты не будут выполняться,Вот мой тест с импортом файла класса:

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);
});

, и я получаю

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)

Если (в тесте) я подкачаю

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

для

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

и измените экспорт в xArticleService.js на

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

, тогда тесты будут выполнены, но React не загрузит его:

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

Iнастроить по умолчанию, создавая с помощью create-react-app.Я не изменил .babelrc.Кто-нибудь может увидеть, где я иду не так?Спасибо

ОБНОВЛЕНИЕ:

Я внес изменения в .babelrc, предложенные в принятом ответе, для возможного дубликата этого, но это не изменило вывод.