react-dndのテストをしようとするとimportでエラーが出る

Question

前提・実現したいこと

react-dndを用いたアプリケーションで自動テストをしたい

発生している問題・エラーメッセージ

import { useDrop } from 'react-dnd'
のような記述があるときにyarn testすると

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

    /Users/[user_name]/react_dnd_test_test/node_modules/react-dnd/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './common';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

    > 1 | import { useDrop } from 'react-dnd'
        |            ^
      2 | 
      3 | it('test', () => {
      4 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/test/test.test.js:1:12)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.183s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

と出てエラーになります。

該当のソースコード

create-react-appをして、yarn add react-dnd react-dnd-html5-backendをした後、src/test/test.jsに

import { useDrop } from 'react-dnd'

it('test', () => {
  //ダミーテスト
})

と書いて保存して、yarn testを実行すると上記のエラーが出ます。

試したこと

もともとはreact-dndのチェスチュートリアル
http://react-dnd.github.io/react-dnd/docs/tutorial
をreduxを絡めて作成していたのですが、それでも同じ症状が起きました。（上では便宜上テストファイル内でimport { useDrop } from 'react-dnd'しましたが、チュートリアルではCompnentファイルでインポートしていました。）
このとき、import { useDrag } from 'react-dnd'をコメントアウトしても、
import { useDrop } from 'react-dnd'のところで同じ現象が起きました。
エラーメッセージではnode_modules/react-dnd/lib/index.jsがパースできない形式になっていると言っていると思うのですが、該当ファイルは

export * from './common';
export * from './hooks';
export * from './decorators';

となっていて、javascriptとしておかしい点がわかりませんでした。

補足情報（FW/ツールのバージョンなど）

create-react-app 1.5.2
yarn 1.9.2
npm 6.9.0
macOS Mojave 10.14.5
package.jsonは以下です。

{
  "name": "react_dnd_test_test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dnd": "^9.0.1",
    "react-dnd-html5-backend": "^9.0.0",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

https://teratail.com/questions/200211
に書いたように、react-dnd-cjsがインストールできるようになったので、importできるようになりました。

ただ、これとは別の問題
https://github.com/react-dnd/react-dnd/issues/1506
でreact-dndのテストはまだできなさそうです。

Answer 2

jest.config.js に次の記述が必要ではないでしょうか？

module.exports = {
  "transformIgnorePatterns": ["node_modules/"]
}

Comments

[threeaster]

だめでした。
プロジェクト直下に`jest.config.js`を作っても結果は変わらず、また`package.json`に同じ内容を追加しても、`Out of the box, Create React App only supports overriding these Jest options:`から始まるエラーメッセージが出て設定を反映できませんでした。その後、`yarn eject`をして再度`package.json`に該当の設定を付け加えましたが、結果は（何もしないのと）変わらずでした。