为什么 @testing-library/user-event 上不存在 clear 方法答案

【问题标题】：Why clear method not exist on @testing-library/user-event为什么 @testing-library/user-event 上不存在 clear 方法
【发布时间】：2020-06-08 08:46:08
【问题描述】：

我正在从事一个 CMS 项目，但遇到了一个问题。 _userEvent.default.clear is not a function.

import user from '@testing-library/user-event'

test('can edit label', async () => {
    createArticleMock()
    await renderRootAndInitStore(rightNowTeasers, globalInitialState)

    const index = 1
    const input = screen.getByDisplayValue(labels[index])
    const newLabel = 'VÄRLDEN'
    user.clear(input)
    user.type(input, newLabel)

    expect(await screen.findByDisplayValue(newLabel))
    user.click(screen.getByTestId('settings-form-save'))
    await screen.findByText(newLabel)
})

当我访问@testing-library/user-event 时，我看到了那些行

// Definitions by: Wu Haotian <https://github.com/whtsky>
export interface IUserOptions {
    allAtOnce?: boolean;
    delay?: number;
}

export interface ITabUserOptions {
    shift?: boolean;
    focusTrap?: Document | Element;
}

export type TargetElement = Element | Window;

declare const userEvent: {
    click: (element: TargetElement) => void;
    dblClick: (element: TargetElement) => void;
    selectOptions: (element: TargetElement, values: string | string[]) => void;
    type: (
        element: TargetElement,
        text: string,
        userOpts?: IUserOptions
    ) => Promise<void>;
    tab: (userOpts?: ITabUserOptions) => void;
};

export default userEvent;

如文件所示，userEvent 上没有 clear() 方法。但是文档指出了clear() 方法。

文档 => Doc

这是我第一次使用这个库。有谁知道是什么问题？

【问题讨论】：

看起来这些类型缺少两个记录的方法 - toggleSelectOptions 也不存在。它们都在最新版本中 (github.com/testing-library/user-event/blob/master/typings/…)，也许您需要更新或等待发布。
npm i -D @testing-library/user-event 和 npm audit fix 解决了这个问题。谢谢 jonrsharpe

标签： javascript reactjs react-testing-library user-event

【解决方案1】：

您必须将@testing-library/user-event 更新到最新版本。然后该错误将得到解决。您可以在这里找到最新版本： https://www.npmjs.com/package/@testing-library/user-event

【讨论】：