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())时，会得到以下结果：

（您会注意到，一旦我的应用程序渲染后，这里的something_one_ref就会正确填充，而不是以前那样，并且看起来像：）

我对此代码有一个简单的规范，它碰巧通过了，但是即使通过了，控制台在测试环境中记录的输出如下所示：

请注意，所有值均为0而不是我期望的值，这是要呈现为真实元素的元素

// 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

Answer 1

我不确定这是否超出您当前的要求，但是您可以考虑在实际的浏览器（真实DOM环境）上运行测试套件，而不是Jest用于模拟浏览器的jsdom Node.JS上的类似环境。

您可以考虑使用Selenium和Cypress之类的测试框架在受支持的浏览器（例如Chrome）上进行测试。这将使您能够进行集成测试（您要实现的目标），并且将来可以在浏览器上进行端到端测试。这样就无需在Node.JS上模拟/存根/模拟DOM元素。

在反应测试库中使用DOM元素吗？

1 个答案: