在react testing-library中使用DOM元素吗？

Question

我有一个关于在React Testing库中使用DOM元素的一般问题。

基本上，我有几个嵌套的组件，其中一个创建了一个React ref，该ref向下转发到某些子组件（以下代码）。

[执行此操作后，它将渲染子组件并检查嵌套的Ref，以调用.getBoundingClientRect()一个神奇的本机javascript函数，该函数可让我确定x和y的位置，宽度和高度以及顶部，底部，左侧和右侧界限。我确实需要此信息，因为我想用它做其他事情，而无需直接修改DOM（我使用setState进行所有DOM修改，然后让React重新渲染DOM）

在开发中（Chrome），当我执行console.log(this.thing_one_ref.current.getBoundingClientRect())时，会得到以下结果：

（（您会注意到，一旦我的应用呈现了，这里的thing_one_ref会正确填充，而不是以前，并且看起来像：）

我对此代码有一个简单的规范，碰巧通过了，但是即使通过了，控制台记录的输出在测试环境中时看起来像这样：

注意，所有值均为0而不是我期望的值，这是要呈现为真实元素的元素，如果它在真实DOM上

// src / App.test.js

import React from 'react';
import  render, wait  from '@testing-library/react';
import App from './App';
test('renders learn react link', async () => 
  const  getByText, getByTestId  = render(<App />);
  const linkElement = getByTestId("app")
  await wait(() => expect(getByText(/A Test of refs/i, linkElement)).toBeInTheDocument());
);

// src / App.js

import React from 'react';
import './App.css';

import styled from 'styled-components'

import ThingOne from './thing_one'
import Container from './container'

const StyledApp = styled.div`
   position: relative;
   height: 100vh;
   width: 100%;
`

function App() 
  return (
    <StyledApp data-testid="app" className="App" style=position: 'relative'>
      <Container />
    </StyledApp>
  );


export default App;

// src / container.js

import React from 'react'
import styled from 'styled-components'

import ThingOne from "./thing_one";
const StyledContainer = styled.div`
  display: block;
`

class Container extends React.Component 
  constructor(props) 
    super(props)
    this.thing_one_ref = React.createRef()
    this.state = 
      message: ""
    
  

  componentDidMount() 
    setTimeout(() => 
      this.setState(message: "A test of refs")

      // here's the console.log
      console.log(this.thing_one_ref.current.getBoundingClientRect())
    , 1000)
  

  render() 
    const message = this.state
    return (
      <StyledContainer>
        message
        <ThingOne ref=this.thing_one_ref/>
      </StyledContainer>
    )
  


export default Container

// src / thing_one.js

import React from 'react'
import styled from 'styled-components'

const StyledThingOne = styled.div`
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
  top: 20%;
  left: 20%;
  border: solid 1px black;
  margin: 20px;
`
const ThingOne = React.forwardRef((props, ref) => (
      <StyledThingOne ref=ref></StyledThingOne>
));

export default ThingOne

如果将测试环境安装在真实的DOM中，并附带可用于三角学和动画的笛卡尔平面，如何使测试环境的行为？我有一些工作代码，取决于getBoundingClientRect()的结果，看起来像这个结果（如上所述，在浏览器中工作）

DOMRect x: 225.1875, y: 38, width: 102, height: 102, top: 38, …

完整的源代码可以在这里参考：

https://github.com/jasonfb/jest-playground-3