Question

我有一个项目要从babel v6升级到babel v7。使它工作并不难，但是我在单元测试代码中遇到了一些问题。

对于工作代码 foo.js 如下所示。

import foo from './bar';
export {foo};

当我尝试在单元测试代码中对其进行模拟时。

import * as Foo 'path/to/foo.js';
Foo.foo = jest.fn().mockReturnValue('whatever');

它失败并显示错误：

TypeError: Cannot set property foo of #<Object> which has only a getter

事实证明，babel v7与v6的移植不同。它将 foo.js 编译为：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "foo", {
  enumerable: true,
  get: function get() {
    return _bar.default;
  }
});

由于 foo 被定义为 exports 的纯吸气剂属性，因此它无法操作导出的< strong> foo 。

目前，我只是更改了 foo.js 以避免这种移植。我想知道这是否是禁用此类转译的babel配置。有什么想法吗？

Answer 1

我怀疑Babel用来传输属性的方式与现在不同。使用"use strict"时，仅定义吸气剂的属性应该抛出TypeError，否则不会给出错误。

示例类

class TestClass
{
  constructor ()
  {
    this._propOne = "JUMP";
  }

  get propOne ()
  {
    return this._propOne;
  }

  set propOne (value)
  {
    this._propOne = value;
  }

  get propTwo ()
  {
    return "HOW HIGH";
  }
}

const testClass = new TestClass();

console.log(customer.propOne);
customer.propOne = "10 Feet!";
console.log(customer.propOne);
customer.propTwo = "20 Feet!";

Babel 6.x日志

> JUMP
> 10 Feet!
> HOW HIGH
> HOW HIGH

Babel 7.x日志

> JUMP
> 10 Feet!
> HOW HIGH
> Uncaught TypeError: Cannot set property propTwo of #<TestCustomer> which has only a getter

Answer 2

在Babel 7中，可以通过启用"loose" mode in @babel/preset-env来禁用此行为。如果仅在测试环境中需要此行为，则可以在babelrc / babel.config.js中进一步限制配置范围。

babel.config.js

module.exports = {
    env: {
        production: {
            presets: [
                [
                    '@babel/preset-env',
                    { loose: false },
                ],
            ],
        },
        test: {
            presets: [
                [
                    '@babel/preset-env',
                    { loose: true },
                ],
            ],
        },
    },
}

请参见loose transformation。

如何避免Jest和Babel v7出现“ TypeError：无法设置属性”错误？

2 个答案: