Reactjs - JEST 用に node_modules をコンパイルするためのカスタマイズ cra

okwaves2024-01-25  199

Cra に JEST を実装しようとしていますが、問題に直面しています:

FAIL  src/App.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:

    /path/to/project/node_modules/@fullcalendar/react/dist/main.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { __assign, __extends } from "tslib";
                                                                                                    ^

    SyntaxError: Unexpected token {

      2 | import PropTypes from 'prop-types';
      3 | import { useUpdate, useDelete, useNotify, useRedirect, useDataProvider } from 'react-admin';
    > 4 | import FullCalendar from '@fullcalendar/react';

つまり、JEST は Ecmascript をサポートしておらず、fullcalendar は ES6 にあるようです。 機能しそうなカスタマイズ cra というライブラリを見つけましたが、期待どおりに機能しません。

これが私のファイル config-overrides.js です

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([path.resolve('src'), path.resolve('node_modules/@fullcalendar')]),
);

そして、テスト起動時のエラーがまだ残っています。アプリをイジェクトしないことができれば、それは本当に素晴らしいでしょう。 もしかしたら何かが足りないかもしれません...

皆さん、ありがとう!



------------------------

次のように、package.json ファイルにもtransformIgnorePatterns を配置してみてください。純粋な reac であっても動作するはずです。何もカスタマイズしない t-script:

"jest": {
    "transformIgnorePatterns": [
      "/!node_modules\/@fullcalendar/"
    ]
  },

0

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。