为什么我的组件引用在测试期间总是未定义

Question

我有一个容器元素，在其中呈现一堆按钮组件。 我试图实现的要求之一是，如果只呈现一个按钮，我希望它被禁用。 现在，确定将在容器中呈现多少个按钮的逻辑非常复杂，所以我不能只检查列表的length来确定它。

所以我想我会很有创意，并使用一个 ref 来检查容器有多少个孩子来确定是否应该禁用里面的按钮：

简化代码片段：

import React, { useRef } from 'react';

const Component = () => {
  const containerRef = useRef();
  const isDisabled = !containerRef.current || ref.current.children.length < 2;

  return (
    <div ref={containerRef}>
      <h3>Title</h3>
      {roster.map((category) =>
        category.positions.every((position) => position.isSelected) ? (
          <Button disabled={isDisabled} {...otherProps} />
        ) : (
          category.positions.map(
            (position) =>
              position.isSelected && (
                <Button disabled={isDisabled} {...otherProps} />
              )
          )
        )
      )}
    </div>
  );
};

上面的代码在我的应用程序中有效，但问题是当我尝试测试此组件时， ref.current始终未定义，这使我无法测试我在容器中呈现多个按钮并且它们是未禁用。

我的测试：

it('calls handleClick when a button is clicked', async () => {
    const { user } = render(
      <Component {...defaultProps} rosterPositionsConfig={config}/>
    );
    const firstButton = screen.getAllByRole('button')[0];
    await user.click(firstButton );

    expect(defaultProps.handleClick).toHaveBeenCalledTimes(1); <-- assertion failing
});

Answer 1

该组件的第一次呈现对于 containerRef.current始终是未定义的，因为页面上的元素只有在您呈现之后才能存在。

所以实际上，你的代码“工作”的唯一原因是你的组件渲染了两次（或更多）。 第一个渲染器始终没有 ref，因此将isDisabled设置为 true，第二个渲染器确实有 ref 并从中计算isDisabled 。 我猜它是由于<React.StrictMode>渲染了两次，在这种情况下，当您进行生产构建时，您的代码将停止工作（严格模式仅在开发构建中导致双重渲染）。 在测试环境中，您只渲染一次，因此这种意外的双重渲染消失了，错误变得更加明显。

我建议您通过不使用 ref 来解决此问题。 相反，您可以直接从数据中计算孩子的数量。 这个逻辑有几种可能的方式，但这里有一个：

const Component = () => {
  const containerRef = useRef();

  let count = 0;
  for (const category of roster) {
    if (category.positions.every((position) => position.isSelected)) {
      count += 1;
    } else {
      count += category.positions.filter(
        (position) => position.isSelected
      ).length;
    }
  }
  const isDisabled = count <= 1;

  return (
    <div>
      <h3>Title</h3>
      {roster.map((category) =>
        category.positions.every((position) => position.isSelected) ? (
          <Button disabled={isDisabled} {...otherProps} />
        ) : (
          category.positions.map(
            (position) =>
              position.isSelected && (
                <Button disabled={isDisabled} {...otherProps} />
              )
          )
        )
      )}
    </div>
  );
};

如果您不喜欢这基本上是将相同的循环逻辑写了两次（我也不喜欢），那么您可以使用另一种方法。 您创建了一个按钮数组，假设它们不会被禁用，但是如果长度为 1，您可以使用 cloneElement 来编辑该 JSX 元素：

import { cloneElement } from "react";

const Component = () => {
  const containerRef = useRef();
  const isDisabled = !containerRef.current || ref.current.children.length < 2;

  // I'm building the array this way so that it's just a 1-d array, and it
  //   doesn't have any `false`s in it
  const buttons = [];
  roster.forEach((category) => {
    if (category.positions.every((position) => position.isSelected)) {
      buttons.push(<Button disabled={false} {...otherProps} />);
    } else {
      category.positions.forEach((position) => {
        if (position.isSelected) {
          buttons.push(<Button disabled={false} {...otherProps} />);
        }
      });
    }
  });

  if (buttons.length === 1) {
    buttons[0] = cloneElement(buttons[0], { disabled: true });
  }

  return (
    <div ref={containerRef}>
      <h3>Title</h3>
      {buttons}
    </div>
  );
};

如果您绝对必须使用 ref（同样，我不建议在这种情况下使用），您需要等到渲染完成后才能更新 ref，然后计算子项，然后将 state 设置为强制第二次渲染。 您可能需要使用布局效果，以便此双重渲染不会对用户造成闪烁：

const Component = () => {
  const containerRef = useRef();
  const [disabled, setDisabled] = useState(true);
  useLayoutEffect(() => {
    setDisabled(containerRef.current.children.length < 2);
  });

  return (
    <div ref={containerRef}>
      <h3>Title</h3>
      {roster.map((category) =>
        category.positions.every((position) => position.isSelected) ? (
          <Button disabled={isDisabled} {...otherProps} />
        ) : (
          category.positions.map(
            (position) =>
              position.isSelected && (
                <Button disabled={isDisabled} {...otherProps} />
              )
          )
        )
      )}
    </div>
  );
};