使用 CRA 2.1 运行测试时，如何启用装饰器支持？

Question

我正在尝试对使用装饰器和 Typescript 与 Create React App v2.1.0 配合使用的 React 应用程序进行测试

我知道装饰器不受官方支持。

感谢React App Rewired 和@babel/plugin-proposal-decorators，我可以正常运行应用程序。

我卡住的地方是在运行测试时启用装饰器支持。

我的 npm test 脚本是："test": "react-app-rewired test --env=jsdom --runInBand"

测试失败：

“decorators”插件需要一个“decoratorsBeforeExport”选项， 其值必须是布尔值。如果您从巴比伦/巴别塔迁移 6 或者想使用旧的装饰器建议，你应该使用 'decorators-legacy' 插件而不是 'decorators

我尝试添加一个 .babelrc 文件，其中包含以下内容：

{
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

但会被：

不能同时使用 decorators 和 decorators-legacy 插件

Answer 1

? 我是 Create React App 的维护者。

如果您使用 TypeScript 并使用测试，则支持装饰器，无需额外配置（CRA ^2.1.1，2.1.0 中存在错误）。

装饰器只有 JavaScript 不支持。

---

首先，删除react-app-rewired 并将您的脚本切换回react-scripts。 接下来，删除您的 .babelrc 文件。

最后，使用装饰器将任何文件转换为 TypeScript 文件 (.tsx)。现在应该一切正常！

另外，您的测试脚本应该只读取"test": "react-scripts test" 或"test": "react-scripts test --runInBand"。按照 2.0 升级指南中的规定，传递 --env=jsdom 是不必要的。

Answer 2

@Onlyann 备份您当前的 package.json 或项目。

试试这个配置，它应该对你有帮助，之后你可以添加额外的包。

// package.json 
    "@babel/core": "^7.0.0-beta.42",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.42",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.42",
    "@babel/preset-env": "^7.0.0-beta.42",
    "@babel/preset-react": "^7.0.0-beta.42",
    "@babel/preset-stage-2": "^7.0.0-beta.42", 

// .babelrc 
   {
    "presets": [
        ["@babel/preset-env", { "modules": false }],
        "@babel/preset-react",
        "@babel/preset-stage-2"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-decorators",
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ],
    "env": {
        "development": {
            "plugins": ["react-hot-loader/babel"]
        }
    } }