react-native+jestで、babelのエラーに遭遇「Support for the experimental syntax 'classProperties' isn't currently enabled」

3821 ワード
babel Jest reactnative Jest テキストリンク

・react-native + jestでの突然のエラーの個人的メモ

突然npm run testが 以下のエラーを出す様になった。

● Test suite failed to run

SyntaxError: /Users/vitorcamacho/workspace/mbanka-earth/node_modules/react-native/jest/mockComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (20:24):

  18 |
  19 |   const Component = class extends SuperClass {
> 20 |     static displayName = 'Component';
     |                        ^
  21 |
  22 |     render() {
  23 |       const name =

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

またbabelさんも物好きですね。と思いながら、issueを読むと、
.babelrcはdeprecatedになっていた。これからは、babel.config.jsを使うらしい。

.babelrcを削除してからの、、、

// .babelrc
{
  "presets": ["module:metro-react-native-babel-preset"],
  "env": {
    "production": {
      "plugins": ["ignite-ignore-reactotron"]
    }
  }
}

babel.config.jsを作成することで、上記のエラーは直った。

// babel.config.js
module.exports =  {
  "presets": ["module:metro-react-native-babel-preset"],
  "env": {
    "production": {
      "plugins": [
        "ignite-ignore-reactotron",
        "@babel/plugin-proposal-class-properties"
      ]
    }
  }
}

このフロントエンドのツールに振り回される感がすごく嫌い。
ES6皆使うのやめて、function構文だけでいいだろう。
jsの進化早すぎる。

参考url
https://github.com/facebook/react-native/issues/21075
の中ほどのコメント。