Question

我正在学习如何测试组件。

这是我要添加测试的组件：https://github.com/sickdyd/react-dynamic-badge/tree/testing

这是测试的主要文件：https://github.com/sickdyd/react-dynamic-badge/blob/testing/src/test/test/DynamicBadge.test.js

我的组件功能取决于其父元素的宽度。具体来说，它使用以下功能：

function getElementContentWidth(element) {

  let styles = window.getComputedStyle(element);
  let padding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);

  return element.clientWidth - padding;
}

在React.useLayoutEffect（）中的调用方式如下：

const containerW = getElementContentWidth( refContainer.current.parentNode );

其中refContainer是一个div，它将我的组件包装在组件渲染器中：

return <div data-testid="badge" ref={refContainer}>{ output }</div>

这是我的测试（）：

test("matches snapshot", ()=> {

  // I found this here: https://reactjs.org/docs/test-renderer.html#ideas
  // but I'm not really sure what this is doing...    
  function createNodeMock(element) {

    if (element.type === 'div') {
      return {
        focus() {},
      };
    }
    return <div></div>;
  }

  const options = { createNodeMock };

  Object.defineProperty(window, 'getComputedStyle', { 
    value: () => ({
        getPropertyValue: (prop) => {
            return '';
        }
    })
  });

  const tree = renderer.create(

    <div style={{ width: "100%" }}>
      <DynamicBadge
        items={[
          "Item 1",
          "Item 2",
          "Item 3",
        ]}
      />
    </div>

    , options

    ).toJSON();

    expect(tree).toMatchSnapshot();
});

测试失败：return element.clientWidth - padding;说TypeError: Cannot read property 'clientWidth' of undefined。

我如何使其工作？

React，开玩笑：无法使用ref访问parentNode

0 个答案: