如何在React测试库中通过拖动来调整文本区域的大小？

Question

我需要测试Material UI的TextareaAutosize在调整大小时是否保持平滑。由于它使用 HTML 文本区域，我想使用右下角的抓取器来模拟用鼠标调整其大小。

我尝试通过以下方式测试 TextareaAutosize 组件的调整大小行为：

it('should not glitch when resizing textarea', function test() {
  if (/jsdom/.test(window.navigator.userAgent)) {
    this.skip();
  }

  const { container } = render(<TextareaAutosize />);
  const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!;

  console.log('before textarea.style.height: ', textarea.style.height);

  // Get the element's dimensions
  const { top, left, width, height } = textarea.getBoundingClientRect();

  // Calculate coordinates of bottom-right corner
  const bottomRightX = left + width;
  const bottomRightY = top + height;

  fireEvent.mouseDown(textarea, { clientX: bottomRightX, clientY: bottomRightY });
  fireEvent.mouseMove(textarea, { clientX: bottomRightX + 50, clientY: bottomRightY + 50 });
  fireEvent.mouseUp(textarea);

  console.log('after textarea.style.height: ', textarea.style.height);
});

我已将其设置为在浏览器中运行测试，而不是在 JSDOM 上，并进行以下检查：

  if (/jsdom/.test(window.navigator.userAgent)) {
    this.skip();
  }

但是，我遇到了一个问题，即

textarea.style.height

的值在鼠标事件之前和之后保持不变，即使我预计它会发生变化。

Chrome Headless 123.0.6312.4 (Windows 10) LOG: 'before textarea.style.height: ', '15px'
Chrome Headless 123.0.6312.4 (Windows 10) LOG: 'after textarea.style.height: ', '15px'

文本区域的高度应该在鼠标交互后增加，但看起来它实际上并没有调整大小。我不确定拖动动作是否被正确模拟。

Answer 1

我使用 Playwright 的 E2E 测试解决了这个问题，而不是使用 React 测试库。下面是测试实现：

首先，渲染用于测试的组件：

import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';

function BasicTextareaAutosize() {
  return <TextareaAutosize data-testid="textarea" />;
}

export default BasicTextareaAutosize;

这是 e2e 测试：

it('should not glitch when resizing', async () => {
  await renderFixture('TextareaAutosize/BasicTextareaAutosize');

  const textarea = await screen.getByTestId('textarea')!;

  // Get the element's dimensions
  const { x, y, width, height } = (await textarea.boundingBox())!;

  // Calculate coordinates of bottom-right corner
  const bottomRightX = x + width;
  const bottomRightY = y + height;

  // Get the initial height of textarea as a number
  const initialHeight = await textarea.evaluate((event) => parseFloat(event.style.height));

  // Move the mouse to the bottom-right corner, adjusting slightly to grab the resize handle
  await page.mouse.move(bottomRightX - 5, bottomRightY - 5);

  // Simulate a double click without releasing the mouse button (mouseup) to grab the resize handle
  await page.mouse.down();
  await page.mouse.up();
  await page.mouse.down();

  // Move the mouse to resize the textarea
  await page.mouse.move(bottomRightX + 50, bottomRightY + 50);

  // Assert that the textarea height has increased after resizing
  expect(await textarea.evaluate((event) => parseFloat(event.style.height))).to.be.greaterThan(
    initialHeight,
  );
});