Jest 快照测试记录错误消息，但应用程序正确呈现并且似乎 function

Question

为了熟悉前端测试，我最近开始使用 Jest 快照库。 我遇到的一个问题是它的错误信息。 尽管应用程序看似正常运行，但我收到错误消息。

例如：

• 我的应用程序有一个名为<NavBar/>的导航栏，与大多数导航栏一样，它包含链接。 我使用react-router-dom来创建链接。

  这是带有开发工具的组件的屏幕截图：

• 这是代码

  import React from 'react'; import { Link } from 'react-router-dom'; const NavBar = ({ userAuth, getUserAuth, authorized }) => { return?authorized: ( <div id='nav-bar'> <div id='logo'><img src='https.//res.cloudinary.com/darp0mj9i/image/upload/v1668059703/icons/Screen_Shot_2022-11-01_at_15.45.36_kzwlv1_sjvqta:svg'/></div> <div id='nav-links'> <p style={{marginRight: '10px'}}>Guest</p> <Link to='/' id='link' className='link-login'> <p>Home</p> </Link> <Link to='/login' id='link' className='link-login'> <p>Login</p> </Link> </div> </div> ): ( <div id='nav-bar'> <div id='logo'><img src='https.//res.cloudinary.com/darp0mj9i/image/upload/v1668059703/icons/Screen_Shot_2022-11-01_at_15.45.36_kzwlv1_sjvqta:svg'/></div> <div id='nav-links'> <p style={{marginRight. '10px'}} >{`Welcome ${userAuth;username};`}</p> <Link to='/' id='link' className='link-login'> <p>Home</p> </Link> <Link to='/login' id='link' className='link-login'> <p>Login</p> </Link> </div> </div> ) }; export default NavBar;

这是我的快照测试

/**
 * @jest-environment jsdom
 */

import renderer from 'react-test-renderer';

import { App, Login, Footer, NavBar } from '../components/testExports.js';

it('renders <NavBar> correctly', () => {
  const tree = renderer
    .create(<NavBar/>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

以下是记录的错误消息：

阅读错误消息将我带到了 node_module react-router-dom/index.tsx:360:7并且我发现这个 function 据我理解看起来负责在 RRD 组件中创建链接

对我来说没有意义的是useHref() function IS 在<Router>组件中，不是直接的，但是如果你在 react devtools 截图中查看 DOM 树 NavBar 是其他直接的 React 组件的子组件<Router> 的孩子

这是我的组件顶部底部的简化片段，以进一步证明这一点

/*////index.js////*/

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App.js';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
  <App/>
</BrowserRouter>
);


/*////App.js////*/

import React, { useState, useEffect } from 'react';
import Router from './Router.js';
const axios = require('axios');
const App = () => {

  return (
    <div id='app'>
      <Router userAuth={userAuth} getUserAuth={getUserAuth} userLogin={userLogin} authorized={authorized} userRegister={userRegister} />
    </div>
  );
}

export default App;

/*////Router.js////*/

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home.js';
import Login from './pages/Login.js'

const Router = ({ userAuth, getUserAuth, userLogin, authorized, userRegister }) => {
  return (
    <Routes>
      <Route path='/' element={ <Home userAuth={userAuth} getUserAuth={getUserAuth} authorized={authorized} /> }/>
      <Route path='/login' element={ <Login userAuth={userAuth} getUserAuth={getUserAuth} userLogin={userLogin}  authorized={authorized} userRegister={userRegister} /> }/>
    </Routes>
  );
};

export default Router;

/*////Home.js////*/

// Global Modules
import React, { useState, useEffect } from 'react';

// Containers
import { Globe, Info, MakeYourOwn, CustomPlanet, CustomInfo, CustomGlobe, NavBar, Footer } from './Imports.js';
const axios = require('axios');

const Home = ({ userAuth, getUserAuth, authorized }) => {
  
  // Main function that renders the planet onto the page
  const newPlanet = () => {
    if (state.build) { // if we're done building our custom planet
      return (
        <div id='home'>
          <NavBar userAuth={userAuth} getUserAuth={getUserAuth} authorized={authorized} />
        <div id='home-body'>
          <Info
          func={alertFunc}
          data={state.data}
          makeyourown={makeyourownClick}/>
          <Globe planetName={state.planetName} />
        </div>
        <Footer/>
      </div>
      );
    }
  }

  return (
    <div id='container'>
      {newPlanet()}
    </div>
  );

}

export default Home;

最重要的是，我的代码在功能上是否有问题（似乎没有，链接有效并且它们成功呈现了所有 UI 组件）？ 还是消息更像是最佳实践？ 我在一篇文章中读到快照测试与测试组件的行为是否正确无关。

参考： https://www.sitepen.com/blog/snapshot-testing-benefits-and-drawbacks

关于快照测试，我有什么不明白的地方吗？ 关于如何前进有什么建议吗？

这也是我的 package.json 和我的 babelrc 以防万一，似乎没有任何依赖性问题

{
  "name": "newapp",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "build": "npx webpack",
    "test": "jest",
    "server": "nodemon server/server.js",
    "client": "npx webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "@react-three/drei": "^9.20.0",
    "@react-three/fiber": "^8.3.1",
    "axios": "^0.27.2",
    "babel": "^6.23.0",
    "babel-jest": "^29.3.1",
    "babel-loader": "^8.2.5",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "jest": "^29.3.1",
    "nodemon": "^2.0.19",
    "path": "^0.12.7",
    "pg": "^8.7.3",
    "postgres": "^3.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-router-dom": "^6.4.3",
    "react-test-renderer": "^18.2.0",
    "styled-components": "^5.3.5",
    "three": "^0.143.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "devDependencies": {
    "file-loader": "^6.2.0",
    "jest-environment-jsdom": "^29.3.1"
  }
}

{
  "presets": [
  "@babel/preset-env",
  [ "@babel/preset-react", {runtime: 'automatic'} ]
  ]
}

Answer 1

很明显，在单元测试中， NavBar组件未在路由上下文中呈现。

it('renders <NavBar> correctly', () => {
  const tree = renderer
    .create(<NavBar />) // <-- just the NavBar, no router
    .toJSON();
  expect(tree).toMatchSnapshot();
});

请记住，在单元测试中，您测试的是代码的单个单元，而不是整个应用程序。 在上面的测试中，您正在独立于所有其他代码测试NavBar组件。 这并不意味着他们仍然在他们正在访问的任何 React 上下文之外工作，即 redux 存储、路由/导航上下文等。

将NavBar组件包装在路由器中，使其具有可用的路由上下文。 MemoryRouter通常用于单元测试。

例子：

import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
import { App, Login, Footer, NavBar } from '../components/testExports.js';

it('renders <NavBar> correctly', () => {
  const tree = renderer
    .create(
      <MemoryRouter>
        <NavBar />
      </MemoryRouter>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});