Jestjs 为什么装饰师赢了'；你不和巴贝尔开玩笑吗？

我正在尝试使用Jest和Babel让JavaScript装饰程序工作：

/package.json

/测试/单元/.LRC

./test/unit/jest.json

当我运行

纱线测试时

我得到：

yarn run v1.12.3
$ jest --no-cache --verbose --config ./test/unit/jest.json
@babel/preset-env: `DEBUG` option

Using targets:
{
  "node": "11.9"
}

Using modules transform: commonjs

Using plugins:
  syntax-async-generators { "node":"11.9" }
  syntax-object-rest-spread { "node":"11.9" }
  syntax-json-strings { "node":"11.9" }
  syntax-optional-catch-binding { "node":"11.9" }

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
  console.error internal/process/next_tick.js:81
    { SyntaxError: [...]/src/resources/elements/product/price.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (10:1):

       8 | import { DataService } from 'services';
       9 | 
    > 10 | @inject(Element, Store, DataService, EventAggregator, I18N)
         | ^
      11 | @useViewStrategy(new RemoteViewStrategy())
      12 | export class ProductPrice {
      13 | 
        at Parser.raise ([...]/node_modules/@babel/parser/lib/index.js:3831:17)
        at Parser.expectOnePlugin ([...]/node_modules/@babel/parser/lib/index.js:5158:18)
        at Parser.parseDecorator ([...]/node_modules/@babel/parser/lib/index.js:7428:10)
        at Parser.parseDecorators ([...]/node_modules/@babel/parser/lib/index.js:7410:30)
        at Parser.parseStatement ([...]/node_modules/@babel/parser/lib/index.js:7245:12)
        at Parser.parseBlockOrModuleBlockBody ([...]/node_modules/@babel/parser/lib/index.js:7812:25)
        at Parser.parseBlockBody ([...]/node_modules/@babel/parser/lib/index.js:7799:10)
        at Parser.parseTopLevel ([...]/node_modules/@babel/parser/lib/index.js:7181:10)
        at Parser.parse ([...]/node_modules/@babel/parser/lib/index.js:8660:17)
        at parse ([...]/node_modules/@babel/parser/lib/index.js:10643:38)
      pos: 362,
      loc: Position { line: 10, column: 0 },
      missingPlugin: [ 'decorators-legacy', 'decorators' ],
      code: 'BABEL_PARSE_ERROR' }

  console.log test/unit/resources/elements/price.spec.js:25
    SyntaxError: [...]/src/resources/elements/product/price.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (10:1):

       8 | import { DataService } from 'services';
       9 | 
    > 10 | @inject(Element, Store, DataService, EventAggregator, I18N)
         | ^
      11 | @useViewStrategy(new RemoteViewStrategy())
      12 | export class ProductPrice {
      13 | 

 FAIL  test/unit/resources/elements/price.spec.js (5.467s)
  ProductPrice
    ✕ should render current (5008ms)

  ● ProductPrice › should render current

    Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

      18 |     });
      19 | 
    > 20 |     it('should render current', done => {
         |     ^
      21 |         component.create(bootstrap).then(() => {
      22 |             const currentElement = document.querySelector('.current');
      23 |             expect(currentElement.innerHTML).toBe('');

      at Spec (../../node_modules/jest-jasmine2/build/jasmine/Spec.js:92:20)
      at Suite.it (resources/elements/price.spec.js:20:5)

  ● ProductPrice › should render current

    Cannot call ComponentTester.dispose() before ComponentTester.create()

      27 | 
      28 |     afterEach(() => {
    > 29 |         component.dispose();
         |                   ^
      30 |     });
      31 |   });

      at ComponentTester.Object.<anonymous>.ComponentTester.dispose (../../node_modules/aurelia-testing/dist/commonjs/component-tester.js:66:19)
      at Object.dispose (resources/elements/price.spec.js:29:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        6.389s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

纱线运行v1.12.3
$jest--no cache--verbose--config./test/unit/jest.json
@babel/预设环境：`DEBUG`选项
使用目标：
{
“节点”：“11.9”
}
使用模块转换：commonjs
使用插件：
语法异步生成器{“节点”：“11.9”}
语法对象rest排列{“节点”：“11.9”}
语法json字符串{“节点”：“11.9”}
语法可选捕获绑定{“节点”：“11.9”}
使用多边形填充：未添加多边形填充，因为未设置“useBuiltIns”选项。
console.error internal/process/next_tick.js:81
{SyntaxError:[…]/src/resources/elements/product/price.js:当前未启用对实验语法“decorators legacy”的支持（10:1）：
8 |从“服务”导入{DataService}；
9 | 
>10 |@inject（元素、存储、数据服务、事件聚合器、I18N）
| ^
11 |@useViewStrategy（新的RemoteViewStrategy（））
12 |出口类产品价格{
13 | 
在Parser.raise（[…]/node_modules/@babel/Parser/lib/index.js:3831:17）
位于Parser.expectOnePlugin（[…]/node_modules/@babel/Parser/lib/index.js:5158:18）
位于Parser.parseDecorator（[…]/node_modules/@babel/Parser/lib/index.js:7428:10）
位于Parser.parseDecorators（[…]/node_modules/@babel/Parser/lib/index.js:7410:30）
位于Parser.parseStatement（[…]/node_modules/@babel/Parser/lib/index.js:7245:12）
位于Parser.parseBlockOrModuleBlockBody（[…]/node_modules/@babel/Parser/lib/index.js:7812:25）
位于Parser.parseBlockBody（[…]/node_modules/@babel/Parser/lib/index.js:7799:10）
在Parser.parseTopLevel（[…]/node_modules/@babel/Parser/lib/index.js:7181:10）
在Parser.parse（[…]/node_modules/@babel/Parser/lib/index.js:8660:17）
在parse（[…]/node_modules/@babel/parser/lib/index.js:10643:38）
位置：362，
loc:位置{行：10，列：0}，
缺少插件：['decorators legacy'，'decorators']，
代码：'BABEL_PARSE_ERROR'}
console.log test/unit/resources/elements/price.spec.js:25
SyntaxError:[…]/src/resources/elements/product/price.js:当前未启用对实验语法“decorators legacy”的支持（10:1）：
8 |从“服务”导入{DataService}；
9 | 
>10 |@inject（元素、存储、数据服务、事件聚合器、I18N）
| ^
11 |@useViewStrategy（新的RemoteViewStrategy（））
12 |出口类产品价格{
13 | 
失败测试/单元/资源/元素/price.spec.js（5.467s）
产品价格
✕ 应呈现电流（5008ms）
● ProductPrice›应呈现最新状态
超时-在jest.setTimeout指定的5000ms超时内未调用异步回调。
18 |     });
19 | 
>20 |它（'应呈现当前'，完成=>{
|     ^
21 |组件。创建（引导）。然后（（）=>{
22 | const currentElement=document.querySelector（'.current'）；
23 | expect（currentElement.innerHTML）.toBe（“”）；
at Spec（../../node_modules/jest-jasmine2/build/jasmine/Spec.js:92:20）
在Suite.it（resources/elements/price.spec.js:20:5）
● ProductPrice›应呈现最新状态
无法在ComponentTester.create（）之前调用ComponentTester.dispose（）
27 | 
28 |每次之后（（）=>{
>29 |组件处理（）；
|                   ^
30 |     });
31 |   });
位于ComponentTester.Object..ComponentTester.dispose（../../node_modules/aurelia testing/dist/commonjs/component tester.js:66:19）
在Object.dispose（resources/elements/price.spec.js:29:19）
测试套件：1个失败，共1个
测试：1次失败，共1次
快照：共0个
时间：6.389秒
运行所有测试套件。
错误命令失败，退出代码为1。
信息访问https://yarnpkg.com/en/docs/cli/run 有关此命令的文档。

---

我做错了什么？

错误消息附带了一个很好的提示：

[……] 缺少插件：['decorators legacy'，'decorators']， 代码：'BABEL_PARSE_ERROR'}

Jest的Babel集成首先会访问

.babelrc

，对于从测试中获得的每个其他文件，它只在项目根目录中搜索。在这种情况下，Babel配置位于

/test/unit

---

因此，将

.babelrc

放入项目根文件夹是一种可能的修复方法（但不是最好的）。可以找到更多的方法。

这很奇怪。我能找到的最接近的方法就是这个。哪个做的正是你所做的，所以我想你可能想先打电话给装饰师来解决这个问题？@bigopon这很奇怪！我发布了一个（快速）解决方案和GitHub上的匹配问题。是的，他们说

.babelrc

是个错误

{
    "presets": [
        [
            "@babel/preset-env", {
                "targets": {
                    "node": "current"
                },
                "modules": "commonjs",
                "loose": true,
                "debug": true
            }
        ]
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

{
    "modulePaths": [
        "<rootDir>/../../src",
        "<rootDir>/../../node_modules"
    ],
    "moduleFileExtensions": [
        "js",
        "json"
    ],
    "testRegex": "\\.spec\\.js$",
    "setupFiles": [
        "<rootDir>/jest.js"
    ],
    "testEnvironment": "node"
}

import 'aurelia-polyfills';
import {Options} from 'aurelia-loader-nodejs';
import {globalize} from 'aurelia-pal-nodejs';
import * as path from 'path';
Options.relativeToDir = path.join(__dirname, '../../src');
globalize();

yarn run v1.12.3
$ jest --no-cache --verbose --config ./test/unit/jest.json
@babel/preset-env: `DEBUG` option

Using targets:
{
  "node": "11.9"
}

Using modules transform: commonjs

Using plugins:
  syntax-async-generators { "node":"11.9" }
  syntax-object-rest-spread { "node":"11.9" }
  syntax-json-strings { "node":"11.9" }
  syntax-optional-catch-binding { "node":"11.9" }

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
  console.error internal/process/next_tick.js:81
    { SyntaxError: [...]/src/resources/elements/product/price.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (10:1):

       8 | import { DataService } from 'services';
       9 | 
    > 10 | @inject(Element, Store, DataService, EventAggregator, I18N)
         | ^
      11 | @useViewStrategy(new RemoteViewStrategy())
      12 | export class ProductPrice {
      13 | 
        at Parser.raise ([...]/node_modules/@babel/parser/lib/index.js:3831:17)
        at Parser.expectOnePlugin ([...]/node_modules/@babel/parser/lib/index.js:5158:18)
        at Parser.parseDecorator ([...]/node_modules/@babel/parser/lib/index.js:7428:10)
        at Parser.parseDecorators ([...]/node_modules/@babel/parser/lib/index.js:7410:30)
        at Parser.parseStatement ([...]/node_modules/@babel/parser/lib/index.js:7245:12)
        at Parser.parseBlockOrModuleBlockBody ([...]/node_modules/@babel/parser/lib/index.js:7812:25)
        at Parser.parseBlockBody ([...]/node_modules/@babel/parser/lib/index.js:7799:10)
        at Parser.parseTopLevel ([...]/node_modules/@babel/parser/lib/index.js:7181:10)
        at Parser.parse ([...]/node_modules/@babel/parser/lib/index.js:8660:17)
        at parse ([...]/node_modules/@babel/parser/lib/index.js:10643:38)
      pos: 362,
      loc: Position { line: 10, column: 0 },
      missingPlugin: [ 'decorators-legacy', 'decorators' ],
      code: 'BABEL_PARSE_ERROR' }

  console.log test/unit/resources/elements/price.spec.js:25
    SyntaxError: [...]/src/resources/elements/product/price.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (10:1):

       8 | import { DataService } from 'services';
       9 | 
    > 10 | @inject(Element, Store, DataService, EventAggregator, I18N)
         | ^
      11 | @useViewStrategy(new RemoteViewStrategy())
      12 | export class ProductPrice {
      13 | 

 FAIL  test/unit/resources/elements/price.spec.js (5.467s)
  ProductPrice
    ✕ should render current (5008ms)

  ● ProductPrice › should render current

    Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

      18 |     });
      19 | 
    > 20 |     it('should render current', done => {
         |     ^
      21 |         component.create(bootstrap).then(() => {
      22 |             const currentElement = document.querySelector('.current');
      23 |             expect(currentElement.innerHTML).toBe('');

      at Spec (../../node_modules/jest-jasmine2/build/jasmine/Spec.js:92:20)
      at Suite.it (resources/elements/price.spec.js:20:5)

  ● ProductPrice › should render current

    Cannot call ComponentTester.dispose() before ComponentTester.create()

      27 | 
      28 |     afterEach(() => {
    > 29 |         component.dispose();
         |                   ^
      30 |     });
      31 |   });

      at ComponentTester.Object.<anonymous>.ComponentTester.dispose (../../node_modules/aurelia-testing/dist/commonjs/component-tester.js:66:19)
      at Object.dispose (resources/elements/price.spec.js:29:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        6.389s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.