Question

我正在尝试使用rect测试库“集成”测试粘贴功能。到目前为止，我已经能够触发“粘贴”事件，并看到粘贴事件被传递到我输入字段的onPaste道具中。

我要测试的是将元素更改为要粘贴的元素的实际值。遵循示例：


import { TextField } from '@material-ui/core';

it('should show an empty cell if value is incorrect', async () => {
  const { getByDisplayValue } = await render(
    <TextField
      value=""
      onPaste={event => {
        console.log(event.clipboardData.getData('text'));
      }}
      onChange={e => {
        console.log(e.currentTarget.value);
      }}
    />
  );

  const input = await getByDisplayValue('');

  const eventProperties = {
    clipboardData: {
      getData: jest.fn().mockReturnValueOnce('Foo Bar Test'),
    },
  };
  const pasteEvent = createEvent.paste(input, eventProperties);
  pasteEvent.clipboardData = eventProperties.clipboardData;

  fireEvent(input, pasteEvent);

  await waitFor(() => {
    getByDisplayValue('Foo Bar Test');
  });
});

结果，我得到：

console.log MyComponent.test.js:110
    Foo Bar Test


TestingLibraryElementError: Unable to find an element with the display value: Foo Bar Test.

<body>
  <div>
    <div
      class="MuiFormControl-root MuiTextField-root"
    >
      <div
        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
      >
        <input
          aria-invalid="false"
          class="MuiInputBase-input MuiInput-input"
          type="text"
          value=""
        />
      </div>
    </div>
  </div>
</body>

我希望value的{{1}}道具填充有粘贴事件的内容，但是如您所见，它为空。另外，我希望触发TextField事件，但事实并非如此（测试中未显示控制台日志）。

如何使用React Testing库测试通用输入文本中的“粘贴”事件

0 个答案: