In my own react app using typescript, I am trying to mimic this documentation for react-testing-library where it tests react router routes and links. In that documentation, the demo is not using typescript, but far as I know that should not matter. In my app below, I have a similar setup, but my test is failing.

在我自己的使用TypeScrip的Reaction应用程序中，我试图模仿Reaction-Testing-Library的文档，在那里它测试Reaction路由器路由和链路。在该文档中，演示没有使用打字脚本，但据我所知，这应该没有关系。在我下面的应用程序中，我有类似的设置，但我的测试失败了。

I cannot see a difference among the App and App.test files between my app and the docs. I did note that there is a difference between the package.json files, but I'm no expert in that realm.

我看不出App和App.test文件在我的应用程序和文档之间有什么不同。我确实注意到了Package.json文件之间的区别，但我不是该领域的专家。

When they seem the same to me, why do my tests fail, but the tests in the docs pass?

当它们在我看来是一样的时候，为什么我的测试失败了，而文档中的测试却通过了？

UPDATED: Error

已更新：错误

App.tsx

App.tsx

import './App.css';
import { Route, Routes, Link } from 'react-router-dom';

function App() {
  const Home = () => <div>here is home</div>
  const Images = () => <div>here is Images</div>

  return (
    <div className="App">
      <Link to="/" >home</Link>&nbsp;
      <Link to="/images" >images</Link>
      <Routes>
        <Route path="/" element={ <Home /> } />
        <Route path="images" element={ <Images /> } />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

App.test.tsx

App.test.tsx

import { render, screen } from '@testing-library/react'
import { BrowserRouter, MemoryRouter } from "react-router-dom"
import userEvent from "@testing-library/user-event"
import App from "./App"

describe('Render text', () => {

  it.only('images route test', async () => {
    render(<App />, {wrapper: BrowserRouter})
    expect(screen.getByText(/here is home/i)).toBeInTheDocument()
    const user = userEvent.setup()
    user.click(screen.getByText(/images/i))
    screen.debug()    // <-- shows home page
    expect(screen.getByText(/here is images/i)).toBeInTheDocument()
  })
})

package.json, react-testing-library documentation

Package.json，反应测试-库文档

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package.json, my app

Package.json，我的应用程序

  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.36",
    "@types/react": "^18.2.13",
    "@types/react-dom": "^18.2.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.13.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}

The only noticeable difference I see between the RTL docs and your code is that their code waits for the UI change to occur from the clicking of the link.

我看到的RTL文档和您的代码之间唯一明显的区别是，它们的代码等待点击链接后发生的UI更改。

test('full app rendering/navigating', async () => {
  render(<App />, {wrapper: BrowserRouter})
  const user = userEvent.setup()

  // verify page content for default route
  expect(screen.getByText(/you are home/i)).toBeInTheDocument()

  // verify page content for expected route after navigating
  await user.click(screen.getByText(/about/i)) // <-- awaited
  expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument()
})

Try also await-ing in your test code.

还可以尝试等待您的测试代码。

it.only('images route test', async () => {
  render(<App />, { wrapper: BrowserRouter });

  expect(screen.getByText(/here is home/i)).toBeInTheDocument();

  screen.debug()    // <-- shows home page

  const user = userEvent.setup();
  await user.click(screen.getByText(/images/i)); // <-- await component rerender

  screen.debug()    // <-- should show images page now

  expect(screen.getByText(/here is images/i)).toBeInTheDocument();
});