标签: user-event

我正在尝试在测试库中使用用户事件实用程序，如下所述：

https://testing-library.com/docs/user-event/intro

不幸的是，当我尝试调用设置函数时

userEvent.setup()

我的 IDE 说找不到它：

为什么会发生这种情况？

我的文件中的导入如下所示：

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

我的包依赖项如下所示：

"@testing-library/dom": "^8.11.3",
"@testing-library/jest-dom": "5.7.0",
"@testing-library/react": "^12.1.2",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",

我正在为 React 组件编写 Jest 测试，并使用该@testing-library/user-event库来模拟用户交互。除了使用 Jest 的假计时器的测试之外，这非常有效。

这是一个示例测试：

it(`fires onClick prop function when the button is clicked`, async () => {\n  // jest.useFakeTimers()\n\n  let propFn = jest.fn()\n\n  let app = RTL.render(\n    <SampleComp onClick={propFn} />\n  )\n\n  await userEvent.click(app.queryByText(\'Test button\')!)\n\n  expect(propFn).toHaveBeenCalled()\n\n  // jest.useRealTimers()\n})\n

这是组件：

function SampleComp({ onClick }) {\n  // a simple bridge for debugging\n  function _onClick(e) {\n    console.log(`_onClick invoked`)\n    return onClick(e)\n  }\n\n  return (\n    <button onClick={_onClick}>\n      Test button\n    </button>\n  )\n}\n

如果没有假计时器，测试将在不到一秒的时间内运行并通过。使用假计时器，测试会超时然后失败：

  \xe2\x97\x8f fires …

我正在遵循最新版本的所有说明@testing-library/user-event。

前：

  test('request support action',() => {
    render(<SupportSection requestSupport={requestSupport} />);

    const button = screen.getByRole('button');

    userEvent.click(button);

    expect(requestSupport).toHaveBeenCalled();
  });

后：

  test('request support action', async () => {
    const user = userEvent.setup();
    
    render(<SupportSection requestSupport={requestSupport} />);

    const button = screen.getByRole('button');

    await user.click(button);

    expect(requestSupport).toHaveBeenCalled();
  });

requestSupport在更高的范围内被嘲笑const requestSupport = jest.fn();

我收到的错误是：

类型错误：range.cloneRange 不是函数

我的所有测试在库更新之前都通过了，现在全部失败了。

我正在开发一个 CMS 项目，刚刚遇到一个问题。_userEvent.default.clear is not a function。

import user from \'@testing-library/user-event\'\n\ntest(\'can edit label\', async () => {\n    createArticleMock()\n    await renderRootAndInitStore(rightNowTeasers, globalInitialState)\n\n    const index = 1\n    const input = screen.getByDisplayValue(labels[index])\n    const newLabel = \'V\xc3\x84RLDEN\'\n    user.clear(input)\n    user.type(input, newLabel)\n\n    expect(await screen.findByDisplayValue(newLabel))\n    user.click(screen.getByTestId(\'settings-form-save\'))\n    await screen.findByText(newLabel)\n})\n

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

// Definitions by: Wu Haotian <https://github.com/whtsky>\nexport interface IUserOptions {\n    allAtOnce?: boolean;\n    delay?: number;\n}\n\nexport interface ITabUserOptions {\n    shift?: boolean;\n    focusTrap?: Document | Element;\n}\n\nexport type TargetElement = Element | Window;\n\ndeclare const userEvent: {\n …

在需要在多个测试中调用 userEvent.setup() 的测试套件中，有时我会在 beforeEach 中执行 userEvent.setup() ，然后user在多个测试中引用相同的 var

let user: UserEvent
beforeEach(() => {
     user = userEvent.setup()
})

describe('SomeTests', () => {
    it('should test something', async () => {
        await user.click(someButton)
        ...
    })

    it('should test some other thing', async () => {
        await user.click(someButton)
        ...blahblahblah
    })
})

但是，我担心这可能会导致并行运行测试出现问题，最好总是这样做：

describe('SomeTests', () => {
    it('should test something', async () => {
        const user = userEvent.setup()
        await user.click(someButton)
        ...blahblahblah
    })

    it('should test some other thing', async () => {
        const user …

如何使用react-testing-library在MUI日期选择器的TextField输入中输入user-event内容？我可以看到正在应用面具

我已经尝试userEvent.type(inputEl, '1')过并且userEvent.keyboard('1'). 在这两种情况下，输入都保持为空。

我当前的假设是，重新渲染将我的更新替换为高阶组件的空状态（这是有道理的，基于应用程序的输入日期格式掩码）。

文档示例按预期工作，因此我的问题特定于MUI datepicker。

可以在此沙箱中找到该组件（和测试）的淡化版本。

下面是渲染的 HTML 的副本，以证明我正在使用 a 定位输入元素data-testid，但这不起作用：

screen.getByTestId('date-selector-text-field').outerHTML:
<input
  aria-invalid="false"
  placeholder="dd / mm / yyyy"
  readonly=""
  type="text"
  aria-readonly="true"
  aria-label="Choose date"
  data-testid="date-selector-text-field"
  class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
  value=""
  aria-describedby="mui-1-helper-text"
  id="mui-1"
>

我有一个输入字段，希望在单元测试期间刺激输入。尝试了互联网上推荐的所有方法，但仍然没有运气，这是我的代码：

// In component
<div className="input-area">
                    <div className="subtitle">Put your answer here</div>
                    <Input onChange={({detail}) => onInputChange(detail.value)}
                           value={name}  data-testid="add-input"/>
                </div>
    

// In test
    test("the input field should take user's input", async () => {
        render(<testModal />);
        const inputMessage = screen.getByTestId("add-input");
        inputMessage.focus(); // take this line off has no effect
        await userEvent.keyboard("testTyping");
    
        expect(inputMessage).toHaveValue("testTyping");
    });

也尝试使用fireEvent.changeanduserEvent.type但没有运气。错误是Expected the element to have value: testTyping Received: undefined感谢任何帮助！

简而言之，我有一个带有 onclick 事件的表行。我通过以下方式得到这个

const row = screen.getByRole('row', { name: /My row/i })
await userEvent.click(row)

这不会触发事件处理程序。但是，如果我这样做：

const row = screen.getByRole('row', { name: /My row/i })
fireEvent.click(row)

这很好用。

我知道 userEvent 使用更多事件来模拟行单击，但事件处理程序在实时应用程序中也可以正常工作。有什么原因可能userEvent无法工作吗？

在一个项目中，我们最近开始使用 userEvent 而不是 fireEvent，但现在我们遇到了这个问题

FAIL src/modules/DashboardHeader/index.test.tsx\xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\n\n\xc2\xa0\xc2\xa0\xc2\xa0 \xc2\xa0 \xe2\x97\x8f Test suite failed to run\xc2\xa0\xc2\xa0\n\n\xc2\xa0\xc2\xa0\xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0 Cannot find module '@testing-library/dom' from 'node_modules/@testing-library/user-event/dist/click.js'\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0 Require stack:\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 node_modules/@testing-library/user-event/dist/click.js\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 node_modules/@testing-library/user-event/dist/index.js\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 src/modules/DashboardHeader/index.test.tsx\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 5 | \n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 6 | \n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0 >\xc2\xa0 7 | import userEvent from '@testing-library/user-event';\xc2\xa0\xc2\xa0\n

我正在使用 create-react-app 5（带有 React 17、Jest 和测试库）以及 MUI 5。我想测试单击一个简单的“选择”菜单，并确保显示菜单选项。我尝试了以下方法：

  it('shows the menu', async () => {
    render(<FormControl fullWidth>
      <InputLabel id="testselect-label">Age</InputLabel>
      <Select
        labelId="testselect-label"
        id="testselect"
        data-testid="testselect"
        label="Age"
        value={10}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>);
    const selectButton = screen.getByTestId("testselect");
    userEvent.click(selectButton);
    expect(await screen.findByRole('presentation')).toBeInTheDocument();
  });

但菜单（有role="presentation"）没有出现，因此测试失败。如果我screen.debug()在测试后调用，它会打印“选择”按钮，但不会打印菜单。

我已经看过这个问题/答案，我发现 MUI5 的 Select 响应 mouseDown 事件而不是 click 事件。但userEvent.click两者都发送，所以这不是问题。我也尝试过fireEvent.mouseDown但没有运气。

我还尝试了调试器，据我所知，onMouseDown相关 MUI 组件 ( SelectInput) 的处理程序从未被调用。

有人有一个有效的例子吗？