Enzyme typescript – 无法设置 [object Event] 的属性目标，它在 Function.assign 中只有一个 getter

Question

代码：

...
wrapper.find('input').simulate('input', { target: {value: 's'}})

命令：

jest test

结果

Cannot set property target of [object Event] which has only a getter at Function.assign

node_modules/enzyme-adapter-preact-pure/build/src/MountRenderer.js 中的错误

    var event = new Event(eventName, {
        bubbles: args.bubbles,
        composed: args.composed,
        cancelable: args.cancelable,
    });
    Object.assign(event, args);

Event 是来自 typescript/libs/lib.d.ts 的接口

interface Event {
    ...
    readonly target: EventTarget | null;
    ...
}

target 是readonly，如何设置自定义目标？

package.json

"@types/jest": "^24.0.19",
"@types/jquery": "^3.3.31",
"enzyme": "^3.10.0",
"enzyme-adapter-preact-pure": "^2.1.0",
"enzyme-to-json": "^3.4.3",
"jest": "^24.9.0",
"preact": "^8.4.2",
"preact-context": "^1.1.4",
"preact-redux": "^2.0.3",
"redux": "^4.0.1",
"ts-jest": "^24.1.0",
"ts-loader": "^4.5.0",
"typescript": "^3.5.3",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.9"

Answer 1

AI这样回答我

在 TypeScript 中使用 Jest 运行测试时，您可能会收到错误“无法设置 [object Event] 的属性目标，它在 Function.assign 上只有一个 getter”。出现这个错误是因为事件对象的目标属性是只读的。

要修复此错误，您需要创建一个虚构的事件对象来代替真实的事件对象。为此，您可以使用 Object.assign() 方法。

这是一个如何做到这一点的例子：

const event = Object.assign({}, {
  target: {
    value: 's'
  }
});
wrapper.find('input').simulate('input', event);

在这个例子中，我们创建了一个虚拟事件对象，它的目标属性的值为：'s'。然后我们将这个虚拟对象传递给 simulate() 方法。

现在在运行测试时不应该出现错误“无法设置 [object Event] 的属性目标，它在 Function.assign 上只有一个 getter”。