用React路由器V4对React组件进行浅层测试
React路由器V4是React官方提供的用于处理前端路由的库。它提供了一种方便的方式来管理应用程序的不同页面之间的导航和状态。React路由器V4使用了一种声明式的方式来定义路由规则，并且可以与React组件无缝集成。
浅层测试是一种测试方法，用于测试React组件的渲染和行为，而不涉及其子组件的渲染和行为。它主要关注组件的输出和交互，而不是其内部实现细节。浅层测试可以帮助开发人员快速验证组件的正确性，并且在重构或修改组件时提供一种可靠的测试手段。
React路由器V4的浅层测试可以通过使用React Testing Library或Enzyme等测试工具来实现。这些工具提供了一些API和方法，用于模拟组件的渲染和交互，并且可以断言组件的输出和行为是否符合预期。
在进行React路由器V4的浅层测试时，可以关注以下几个方面：
- 渲染测试：验证组件是否能够正确地渲染，并且渲染的结果是否符合预期。可以使用测试工具提供的渲染方法来模拟组件的渲染，并且断言渲染结果是否符合预期。
- 导航测试：验证组件的导航行为是否正确。可以模拟用户的导航操作，并且断言导航结果是否符合预期。可以使用测试工具提供的模拟事件方法来模拟用户的导航操作。
- 状态测试：验证组件的状态是否正确。可以模拟组件的状态变化，并且断言状态变化的结果是否符合预期。可以使用测试工具提供的模拟事件方法来模拟组件的状态变化。
- 交互测试：验证组件的交互行为是否正确。可以模拟用户的交互操作，并且断言交互结果是否符合预期。可以使用测试工具提供的模拟事件方法来模拟用户的交互操作。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。产品介绍链接
- 腾讯云云数据库MySQL版：提供高性能、可扩展的云数据库服务。产品介绍链接
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
- 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
- 腾讯云物联网平台：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行。
相关·内容
3回答
如何在react路由器v4中对组件进行单元测试？我试图使用jest和酶通过重定向对一个简单的组件进行单元测试，但没有成功。
我的组件：
const AppContainer = ({ location }) =>
(isUserAuthenticated()
? <AppWithData />
: <Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>);
我尝试测
浏览 1提问于2017-06-01得票数 25
回答已采纳
我有一个FileDrop组件，然后我使用酶来测试它不能正确地呈现组件，输出是
<Route render={[Function: render]} />
以下是我的组件：
import React from "react";
import Dropzone from "react-dropzone";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { dropFiles} from
浏览 1提问于2018-09-01得票数 0
我用的是酶。我需要测试一个组件的反应路由器连接作为一个子。我需要以下几点
使用酶的挂载()安装组件，因为我需要测试整个组件树
当组件的属性发生变化时，测试其行为。
我不能用StaticRouter或MemoryRouter包装组件，因为酶只允许根级的setProps()。
我目前的解决方案是使用sinon对链接呈现方法进行存根。下面是一个简短的例子。
import {Link} from 'react-router-dom';
import sinon from 'sinon';
// ....
// ....
describe('t
浏览 1提问于2017-10-01得票数 4
当我尝试用react路由器连接redux和用react路由器连接mobx时，我正在经历一些严重的疲劳。我还试图将顶级状态与路由器的render功能连接起来，但由于路由器不刷新，该方法将失败。我的状态管理要求相当简单，我觉得redux或mobx太过分了。我真正需要的是一个顶级的状态提供程序，它的行为就像任何其他组件级别的状态一样，并使用回调来操作它。
一整个上午，我都在谷歌上搜索不同的解决方案，但是，我找不到一个可用的默认反应状态的解决方案，它可以与Reactive路由器(v4)一起工作。
有什么解决办法吗？或者它真的是不可能做的，当涉及到状态与反应路由器？
浏览 3提问于2017-11-06得票数 0
回答已采纳
我正在用酶开玩笑，并试图打印出wrapper.debug，但我没有得到输出，如开玩笑的文档。这里怎么了？我的测试文件：
import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import App from './../../components/App/App';
Enzyme.configure({ adapter : new Enzy
浏览 2提问于2019-01-18得票数 9
我正在使用jest来测试一个组件，其中包含一个来自react路由器v4的<Link>。
我收到一个警告，<Link />需要来自react路由器<Router />组件的上下文。
如何在测试中模拟或提供路由器上下文？(基本上如何解决此警告？)
Link.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import { Link } from 'react-router-dom';
test('
浏览 13提问于2017-05-03得票数 36
回答已采纳
我有一些小问题，从React路由器v3迁移到v4。在v3中，我可以在任何地方做到这一点：
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
如何在v4中实现这一点。
我知道，当您在组件中时，我可以使用特殊的withRouter、react上下文或事件路由器支持。但对我来说不是这样。
我在寻找在v4中的等价性
浏览 16提问于2017-03-08得票数 125
回答已采纳
1回答
如何使用酶测试嵌套的连通组件？
、、、、
我正在尝试测试嵌套的连接组件(Redux connected)：主组件有Container组件，由App中的store wrapper提供。
import React, { Component } from 'react';
import Main from './components/Main';
import './App.css';
import { Provider } from 'react-redux'
import createStore from './redux'
import applyConf
浏览 1提问于2018-05-03得票数 1
1回答
酶双潜入组件内部提供者
、、、
我有一个组件正在访问Redux商店。我把它包装成这样的提供者：
player = shallow(<Provider store={store}><MusicPlayer/></Provider>).dive();
当我运行player.debug()时，它将显示：
<MusicPlayer/>
正如我所理解的，当前dive正在显示提供者的内容。由于我需要访问我的MusicPlayer组件，所以我添加了一个额外的跳水：
player = shallow(<Provider store={store}><MusicPlayer/&
浏览 1提问于2020-01-29得票数 2
1回答
我用的是react路由器v4
如何有效地测量(通过导航定时performance.mark和performance.measure)用户从链接上的单击事件到他导航到更新/呈现的路径所需的时间？
浏览 0提问于2018-03-21得票数 2
回答已采纳
我的组件是用Memo包装的
const FamilyVariantTags = React.memo((
{ project, combineVariants, cloneToIllumina, variant, variantTagNotes, family, projectTagTypes, projectFunctionalTagTypes, dispatchUpdateVariantNote, dispatchUpdateFamilyVariantTags, dispatchUpdateFamilyVariantFunctionalTags, isCompoundHet, vari
浏览 0提问于2020-06-30得票数 0
1回答
我正在尝试为使用微前端架构的react网络应用程序编写单元测试。我的第一步是为应用程序容器编写单元测试。
应用程序容器react组件使用包含带有后续路由的交换机的react路由器来呈现主内容区域中的组件。
使用JavaScript运行时集成将每个应用程序挂载到应用程序容器。
我正在使用React Jest Library和Jest作为测试工具集的一部分。
我在互联网上到处搜索，没有找到任何关于我所拥有的问题的有用文章。它们中的大多数展示了测试与我的场景无关的web应用程序的演示。
我有三个问题，我想要一些指导。
(自微前沿)由多个组件层组成，这些组件与身份验证和其他业务逻辑链接在一起。我应该只
浏览 3提问于2021-08-09得票数 3
回答已采纳
我使用Google和React，React路由器v4 (没有任何包像react google)。我需要把反应路由器v4组件(NavLink或链接)中的信息。我尝试使用ReactDomServer.renderToString()。
const infoWindowContent = ReactDOMServer.renderToString(
<NavLink to="project/5">Show</NavLink>
);
this.infoWindow.setContent(infoWindowContent
浏览 2提问于2017-12-09得票数 0
回答已采纳
2回答
在路由时防止组件拔出
、、、
在从父组件路由时，我需要保留一个子组件。搜索网络和大多数答案关于“反应路由器”，但我使用的是“反应-路由器-多姆”(也称为反应路由器V4)。我很新的反应，并认为这应该是相当简单的，如标记组件，以不被卸载或类似的东西。
import Home from "./home/Home";
import Top from "./top/Top";
export default class Layout extends React.Component{
render(){
return(
<Router>
浏览 3提问于2017-10-03得票数 0
回答已采纳
我正在将一个应用程序(不是由我编写的)从react路由器v2迁移到v4。
旧的v2代码如下所示：
<Route path="/configurations/:id" onEnter={loadConfiguration}>
// some stuff
</Route>
新的v4代码如下所示：
<Route path="/configurations/:id" component={MyComponent}>
// some stuff
</Route>
export default class M
浏览 2提问于2017-10-04得票数 0
回答已采纳
问题是：
组件子的道具作为父级状态的值传递下来。
子对象有一个方法，该方法调用父级的方法，该方法更新父级的状态。
当父级的状态更新时，子的支柱值之一会发生变化。见：<Child prop1={this.state.prop1}>
对这个过程进行测试的正确方法是什么？
下面是一些示例代码，以使问题更加清晰：
//App.js
import React, { Component } from 'react';
import Content from './Content';
class App extends Componen
浏览 0提问于2017-01-31得票数 4
3回答
我知道这个问题以前有人问过，但我一直对此有异议。
我遇到的问题是，当我使用类似于页面布局的组件来包装我的路由时，这个页面布局是在更改路径时重新呈现的。
在react路由器v3中，我做了这样的事情：
<Router history={this.props.history}>
<Route path="/">
<IndexRedirect to="/Dossiers" />
<Route path="/Dossiers" component={MainLayout}>
&
浏览 9提问于2017-05-17得票数 2
所以我有了我的App.tsx，我使用了来自react路由器4的交换机。
import { Rate } from 'antd'
import * as React from 'react'
import './App.scss'
import { Route, Switch } from 'react-router' // react-router v4
class App extends React.Component {
public render() {
return (
<div clas
浏览 0提问于2018-08-05得票数 1
回答已采纳
1回答
我已经为post.js编写了找到3p标签的测试用例，但它抛出了一个错误。如何正确测试此组件？
Post.js
import React from 'react';
import './Post.css';
const Post = (props) => {
const displayPosts = (props) => {
const { posts } = props;
if ( posts.length > 0 ){
return(
posts.map( (post
浏览 2提问于2021-03-28得票数 0
因此，我对React框架相当陌生，我已经决定使用路由器v4，即使它还处于beta版，在编写这篇文章时，它似乎是最好的方法。
我有一个路由器显示两个组件中的一个
import React from 'react';
import { HashRouter as Router, Route } from 'react-router-dom';
import Category from './category/Category';
import Hist from './hist/Hist';
const Controls = Rea
浏览 1提问于2017-03-31得票数 2
回答已采纳
考虑到非常简单的页面(假设React和react路由器@4已被导入)：
// Current location: example.com/about
<Link to="/about/#the-team">See the team</Link>
// ... loads of content ... //
<a id="the-team"></a>
我希望上面的，点击“看到的团队”将滚动到id‘’ed的团队锚。url正确地更新为：example.com/about#the-team，但它不会向下滚动。
我尝试过诸如
浏览 2提问于2016-10-24得票数 16
回答已采纳
我正在为一个简单的React组件编写一个测试，该组件使用props传入对象，然后将文本从该对象加载到屏幕上。下面是我得到的信息： QuoteBox.js import React from 'react'
export default class QuoteBox extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div
className='quote-box'
浏览 14提问于2020-09-18得票数 0
回答已采纳
我是新的反应路由器，并了解到有这么多的方式重定向一个页面：
使用browserHistory.push("/path")
从“react路由器”导入{ browserHistory }；//做一些事情.browserHistory.push("/path")；
使用this.context.router.push("/path")
类Foo扩展React.Component {构造函数(道具、上下文){超级(道具、上下文)；//做一些事情.}重定向(){ this.context.router.push("/path")
浏览 4提问于2017-07-13得票数 166
回答已采纳
1回答
我对React测试和Jest和酶都是新手。我正在尝试首先学习如何使用TDD方法，因此，我正在开始编码之前构建我的测试。我所做的是在React中创建了一个示例应用程序，并安装了酶依赖性，然后我编写了测试：
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLa
浏览 2提问于2020-04-24得票数 1
1回答
我一直在尝试测试redux的ConnectedComponent。但我不能相处。当我将商店作为商店支柱传递给ConnectedComponent时，我会得到以下错误：
不变违规:道具中的redux存储已被删除，什么也不做。若要为特定组件使用自定义Redux存储，请使用React.createContext()创建自定义React上下文，并传递context对象以进行React Redux的提供程序和特定组件，如：。您还可以传递一个{context : MyContext}选项来连接
我的测试：
const store = storeFactory({ success: true });
浏览 0提问于2019-01-20得票数 3
3回答
我只是从Jest和Snapshot测试开始，我想知道为什么所有的例子都要对React组件进行“深度渲染”来创建快照。
示例
const A = () => {
return <div><B /><B /></div>
}
const B = () => {
return <div>This is B</div>
}
// TEST
describe('Test', () => {
it('renders correctly', () => {
浏览 1提问于2017-02-20得票数 14
回答已采纳
我使用的反应带和反应-路由器4.0.0-beta.6在教育项目，是位于gitlab与自定义域。
根据Reactstrap docs:这就是我应该使用active navlink的方式
import { NavLink } from 'reactstrap'
...
<NavLink href="#" active = true >Link< /NavLink>
根据React路由器v4文档：
import { NavLink } from 'react-router-dom'
...
<Na
浏览 4提问于2017-02-21得票数 8
回答已采纳
1回答
我正在使用enzyme编写一些测试，但我有一些奇怪的行为。这是我的测试：
import React from 'react'
import { TypeTable } from 'routes/Type/components/TypeTable'
import { shallow } from 'enzyme'
import { Table } from 'react-toolbox'
// ...
let _props, _wrapper
beforeEach(() => {
_p
浏览 3提问于2016-10-24得票数 2
回答已采纳
我是新来的反应和反应路由器。我正在使用React路由器v4，并遵循基于以前版本的教程--但我让它正常工作(使用在SO上找到的一些东西，在react路由器v4文档上使用的一些东西)。
不过，有一件事困扰着我。
我有一个url ，它基本上加载了所有bug的列表。但是我也有一些可能的urls，比如，它加载了一组特定的urls。
urls本身可以正常工作，并按预期的方式完成工作。
实际上，每当我输入 (或任何params)时，组件都会执行它们的工作，但是URL地址栏显示 (尽管呈现显示了与优先级和状态相关的所有内容)。
不知何故，URL地址栏被更改了，但我不明白为什么。
这是我的App.js
impo
浏览 8提问于2017-04-03得票数 4
我有一个反应应用程序使用react路由器v4。除了我的应用程序，我有一些链接，需要更新路由器。我如何从外部的反应访问路由器？我是否以某种方式公开了窗口对象上的BrowserRouter实例？
浏览 1提问于2017-01-04得票数 0
回答已采纳
3回答
每当我尝试浏览像"/about“这样的路径时，浏览器中的路径会是这样的："”。我有主页了。反应路由器并没有指引我到想要的路径。
我使用React路由器v4。
这是我的App.jsx文件：
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router-dom').BrowserRouter;
var {Route,Link, hashHistory, Switch} = require(
浏览 3提问于2017-07-14得票数 1
回答已采纳
我正在尝试为我的React应用程序使用路由器。我尝试了一段时间前一直在使用的东西，但似乎无法使其运行。React路由器v4中的hashHistory是否已删除/重新格式化？
<Router history={hashHistory}>
<Route path='/' component={MainContainer} />
</Router>
浏览 3提问于2017-09-03得票数 15
回答已采纳
我刚刚开始使用jest和酶。
我有一个问题，使我的单元测试工作。我正在使用redux- mock -store来模拟store对象。
it('shows an li for each comment', () => {
expect(container.find('li').length).toBe(2);
});
我期望有两个li元素，但是我得到了0个li元素。
我在这个错误中纠结了很长时间。
有没有人能帮我弄清楚怎样才能通过这项测试！？
来自jest test runner的测试结果
Error: expect(received).toBe(e
浏览 25提问于2017-06-27得票数 1
回答已采纳
我有个奇怪的行为。一旦我将套接字连接添加到react / redux系统中，我的主组件就会在发出下一个操作时被重新命名。
我也有这种行为，当我再次单击导航链接(分派相同的路由操作)时，compoenent也会重新发送，即使我停留在相同的页面上。
有人能帮我上轨道吗？非常感谢!
设置反应0.15.x redux反应-路由器v4反应-路由器反应
容器的app.jsx和应用程序结构：
class Root extends React.Component {
render() {
return (
<Provider store={store}>
&
浏览 1提问于2017-03-17得票数 1
React路由器过去是静态的，但在版本4中它变成了动态的。这有很多优点，但在某些情况下，您更愿意让React组件独立于路由器。例如，如果您正在升级到React路由器v4，并且不想做太多更改，或者如果您希望保持组件中任何路由器功能的整洁，以提高可重用性。
你怎么做到的？
浏览 3提问于2018-04-25得票数 0
在react路由器v2和v3中，我们可以
import React, { Component, PropTypes } from "react";
class PostsNew extends Component {
static contextTypes = {
router: PropTypes.object
}
handleUserSubmit(props) {
this.props.createPost(props)
.then(() => {
// the post has been created
浏览 0提问于2017-04-14得票数 0
我有一个子组件，它包含一个作为道具的方法。此子组件呈现无线电组。当我单击这些基于收音机值的单选按钮时，会呈现另一个组件。我有两个问题。
我无法调用子组件道具方法(setSeverityLevel)
containsMatchingElement()返回false，尽管调试显示了可用的组件。
import * as React from "react";
import { SelectSeverityLevel } from "components/Common/SelectSeverityLevel";
import Sev1Confirmati
浏览 0提问于2020-04-17得票数 0
2回答
有没有办法在使用react路由器v4更改路由时触发事件。我需要在每次路由更改时触发一个函数。在通用的react-redux应用程序中，我在客户端使用来自react-router-dom的BrowserRouter和Switch。
浏览 4提问于2017-04-20得票数 4
回答已采纳
我在昨天的求职面试中被问到一个问题：What are the internal implementation differences between PureComponent and Component in React，我对这个问题缺乏了解，把我的面试搞砸了。 我知道它们之间的详细区别，包括React文档中的所有内容，以及何时和如何使用它们，但我不知道它们在React源代码中的实现。 你能给我一些这个问题的简要总结，以及如何浏览React的源代码以获得更深层次的知识的一些建议吗？
浏览 12提问于2019-02-14得票数 1
回答已采纳
我用Jest和酶对我的应用程序进行单元测试。我以前是这样测试的：
const textFieldWrapper= shallow(<TextField label="Standard" />);
expect(textFieldWrapper.find('input').length).toEqual(1);
现在，返回的DOM似乎是：
<ContextConsumer>
[function]
</ContextConsumer>
我再也无法访问输入信息了。
我的问题是，如何使用这个新呈现的DOM?来访问输入值？
pac
浏览 0提问于2018-09-19得票数 2
回答已采纳
2回答
状态变化后的测试反应组件
、、、、
如何测试以下组件？
import React from "react";
class ModuleLoader extends React.Component {
state = {
Module: null
};
componentDidMount() {
this.props
.Module()
浏览 0提问于2018-10-03得票数 0
回答已采纳
1回答
我在测试我的组件时遇到了一个问题，这个组件很薄地包装了Material-UI autocomplete。在我的测试中，我想查看传递给的props，但我的控制台语句是一个空对象。我正在使用酶的浅层方法来渲染它。下面是我的代码：
const underlineFocusStyle = {
display: 'block',
height: '100%',
outline: 'none',
position: 'relative',
padding: '0px',
wi
浏览 0提问于2017-05-16得票数 7
回答已采纳
我使用typescript，react和material-ui。我正在尝试用jest做一个快照测试。但是material-ui的MenuItem抛出了Invariant Violation: getNodeFromInstance: Invalid argument.异常。
下面是我要测试的组件：
import * as React from 'react';
import {MuiThemeProvider, Paper, Menu, MenuItem, Divider} from 'material-ui';
class App extends React
浏览 0提问于2017-05-27得票数 1
我正在尝试使用React路由器V4和新的React的上下文API。这是我的代码：
class App extends Component {
static propTypes = {
router: PropTypes.func.isRequired,
module: PropTypes.string.isRequired,
sideMenuConfig: PropTypes.string
};
render() {
let baseName = "/" + this.props.mod
浏览 0提问于2018-04-25得票数 1
回答已采纳
我用的是react路由器v4，没有回放。代码示例如下：
class MainPage extends Component {
render() {
return (
<div className="MainPage">
<BrowserRouter>
<Switch>
{/* <Route exact path='/' /> */}
&l
浏览 0提问于2018-07-26得票数 0
回答已采纳
在这篇关于的教程中，作者使用了React路由器v2-3，我想使用新的React路由器v4来实现它。因此，我试图更改这个代码，它使用了react路由器v2：
import React from 'react';
import { IndexLink, Link, browserHistory } from 'react-router';
export class Navigation extends React.Component {
logout(e) {
e.preventDefault();
Meteor.logou
浏览 1提问于2017-03-16得票数 0
回答已采纳
1回答
我不想使用开关，因为我想利用使用当前url更新自身的多个组件。但我必须使用开关，因为我想要404页。
当然，我使用的是react路由器v4。有人能帮我找到解决方案吗？
浏览 2提问于2018-06-04得票数 1
回答已采纳
我有几个用作路由的按钮。每次路由更改时，我都要确保激活的按钮发生更改。
有没有办法监听react路由器v4中的路由更改？
浏览 70提问于2017-01-28得票数 189
回答已采纳
我无法将react-router-dom链接放入react-google- InfoBox中而不导致整个页面重新加载。
下面是我的InfoBox的代码：
import InfoBox from 'react-google-maps/lib/components/addons/InfoBox'
import { Link } from "react-router-dom";
class MyInfoBox extends Component {
...
const options = {
enableEventPropagation:false,
浏览 16提问于2018-01-13得票数 1
而
<Router history={browserHistory} children={this.props.routes} />
在React路由器v4中受支持，
使用react-router-redux ConnectedRouter不支持它
例如
<ConnectedRouter
history={this.props.history}
children={this.props.routes}
/>
是否有一种方法可以将路径作为子道具传递，因为这是使用对象构建路径的简单方法
谢谢
浏览 0提问于2017-08-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
