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

Question

我正在尝试获取使用装饰器和 Typescript 与 Create React App v2.1.0 一起工作的 React 应用程序的测试

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

感谢 React App Rewired and @babel/plugin-proposal-decorators.

我可以运行应用程序正常

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

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

测试失败：

The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators

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

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

但被击中：

Cannot use the decorators and decorators-legacy plugin together

Answer 1

@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"]
        }
    } }

Answer 2

我是 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。

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

How can I enable decorators support when running tests with CRA 2.1?

typescript

reactjs

jestjs

create-react-app

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

How can I enable decorators support when running tests with CRA 2.1?

typescript

reactjs

jestjs

create-react-app

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