Reactjs React Jest测试：TestingLibraryElement错误：找不到元素

我无法在jest测试中获取测试id。我是一个新的反应测试。我想测试这个组件，并返回之前给出的h3文本

告诉我：
“TestingLibraryElement错误：无法通过以下方式找到元素：[data testid=“testH3]””

你能帮我吗

// Component
import React from 'react';
import './Card.scss'; 
import Card from '@material-ui/core/Card';
import { Link } from "react-router-dom";

function MovieCard({title, image}) {
    return (
        <div className="card__container">
            <Link to={"/details/" + title}>
                <Card className="card">
                    <img src={image} alt=""/>
                    <div className="card__info">
                        <h3 
                            data-testid="testH3"
                            className="card__title">{ title }
                        </h3>
                    </div>
                </Card>            
            </Link>
        </div>
    )
}

export default MovieCard

//组件
从“React”导入React；
导入“/Card.scss”；
从“@material ui/core/Card”导入卡片；
从“react router dom”导入{Link}；
函数MovieCard（{title，image}）{
返回(
{title}
)
}
导出默认电影卡

//测试
从“React”导入React；
从'@testing library/react'导入{render，screen，cleanup}；
从“../MovieCard”导入MovieCard；
从“react Router dom”导入{BrowserRouter as Router}；
每次之后（清理）；
描述（'测试电影卡'，（）=>{
常量树=渲染(
)
它（'应与快照匹配'，（）=>{
screen.debug（）；
expect（tree.toMatchSnapshot（）；
});
它（'测试h3'，（）=>{
const{getByTestId}=tree；
常量元素=screen.getByTestId（'testH3'）
});
});

更新：

最终的代码现在运行得很好。谢谢你们

import React from 'react';
import { render, screen, cleanup } from '@testing-library/react';
import MovieCard from '../MovieCard';
import { BrowserRouter as Router } from "react-router-dom";

afterEach(cleanup);

describe('Test MovieCard', () => {
  function tree() {
    return render(
      <Router>
        <MovieCard title="Batman" image="imagesrc"/>
      </Router>
    )
  }

  it('should match with snapshot', () => {
    expect(tree()).toMatchSnapshot();
   });

   it('test h3 text is Batman', () => {
     const {getByTestId} = tree();
     const element = screen.getByTestId('testH3')
     expect(element.textContent).toEqual("Batman")
     screen.debug();
    });
  });

从“React”导入React；
从'@testing library/react'导入{render，screen，cleanup}；
从“../MovieCard”导入MovieCard；
从“react Router dom”导入{BrowserRouter as Router}；
每次之后（清理）；
描述（'测试电影卡'，（）=>{
函数树（）{
返回渲染(
)
}
它（'应与快照匹配'，（）=>{
expect（tree（））.toMatchSnapshot（）；
});
它（'测试h3文本是蝙蝠侠'，（）=>{
const{getByTestId}=tree（）；
常量元素=screen.getByTestId（'testH3'）
expect（element.textContent）.toEqual（“蝙蝠侠”）
screen.debug（）；
});
});

使用

函数

而不是

常量

describe('Test MovieCard', () => {
  function tree() {
    return render(
      <Router>
        <MovieCard title="Batman" image="imagesrc"/>
      </Router>
    )
  }

  it('should match with snapshot', () => {
    screen.debug();
    expect(tree()).toMatchSnapshot();
   });

   it('test h3', () => {
     const {getByTestId} = tree();
     const element = screen.getByTestId('testH3')
    });
  });

description（'testmoviecard'，（）=>{
函数树（）{
返回渲染(
)
}
它（'应与快照匹配'，（）=>{
screen.debug（）；
expect（tree（））.toMatchSnapshot（）；
});
它（'测试h3'，（）=>{
const{getByTestId}=tree（）；
常量元素=screen.getByTestId（'testH3'）
});
});

您的组件渲染是否在测试环境中？您应该将您的组件渲染移动到“预渲染”中。是，它正确渲染。我在屏幕上看到它。debug（）当我将树函数放入beforeach中时，我得到：ReferenceError:tree未定义

beforeach

应设置

让
回调范围内的变量进行描述。您还可以将渲染移动到每个
it
块中，以实现相同的目标：保持每个
it
块状态分开。切勿让渲染组件从一个
块带到下一个
块。这使得测试不可靠且难以信任。执行此操作时，我会遇到另一个错误：TypeError:无法对“tree（…）”的属性“getByTestId”进行分解，因为它未定义。这一点很明显，因为我没有返回呈现的组件。更新了答案。你能再检查一下吗？是的，现在可以了，谢谢。更新中的最终代码在更新后的代码中，您将只获得
getByTestId
。也许您在答案中查看了代码？我更新了顶部的代码。
describe('Test MovieCard', () => {
  function tree() {
    return render(
      <Router>
        <MovieCard title="Batman" image="imagesrc"/>
      </Router>
    )
  }

  it('should match with snapshot', () => {
    screen.debug();
    expect(tree()).toMatchSnapshot();
   });

   it('test h3', () => {
     const {getByTestId} = tree();
     const element = screen.getByTestId('testH3')
    });
  });