reactjs - 如何实现 ref.current 使用的测试覆盖率？

Question

我正在掌握@testing-library/react和测试一般情况，但我对如何通过jest使用useRef我们想要运行副作用的位置甚至是在ref.current存在条件下触发的函数体来实现 100% 覆盖感到困惑. 在我的上下文中，我只关心组件是否被渲染，那是我对 dom 元素执行 dom 突变的时候。我知道这并不理想，但这是我使用另一个库所面临的用例。

这是一个演示我的问题的简单组件：

export const Test: React.FC<TestProps> = ({text}) => {
  const ref = React.useRef<HTMLDivElement>(null);

  React.useLayoutEffect(() => {
    if (ref.current !== null) { // this is line 11 which is not covered according to jest below
      const span = ref.current.getElementsByTagName('span')[0];

      span.setAttribute('data-test', 'attribute has been set');
    }
  }, [ref.current]);

  return (
    <div ref={ref}>
      <span>{text}</span>
    </div>
  );
};

这是测试。我知道screen诸如提供了推荐的查询getByRole，但是标签/标记不佳的库迫使我依赖更传统enzyme的方法，即使用经典文档查询来定位我需要变异和断言的元素。

it('renders and sets attribute', () => {
  const {container} = render(<Test text="hello" />);

  expect(container.getElementsByTagName('span')[0]).toHaveAttribute(
    'data-test',
    'attribute has been set'
  );
});

测试实际上通过了，这意味着运行并断言了副作用。当测试运行时，ref.current为真，副作用通过useLayoutEffect. 我听说断言副作用应该有效并算作覆盖范围，但这不是我所看到的。我还听说我可能需要重新渲染组件才能确认逻辑的覆盖范围，但是使用 RTLrerender也没有做任何事情。

通过开玩笑节目获得报道：

-------------------------------------|---------|----------|---------|---------|-------------------
File                                 | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------------------------------|---------|----------|---------|---------|-------------------
 components/Test                     |     100 |       50 |     100 |     100 |
  Test.tsx                           |     100 |       50 |     100 |     100 | 11

任何帮助，将不胜感激。我到处搜索，但无法弄清楚如何解决这个用例，我希望在ref.current存在的条件/分支上测试覆盖率，其中ref附加到 dom 元素。也许这不是我正在考虑的正确范式？

标签： reactjsjestjsreact-testing-library