如何模拟反应路由器上下文

2024-03-01

我有相当简单的反应组件(链接包装器,如果路由处于活动状态,则会添加“活动”类):

import React, { PropTypes } from 'react';
import { Link } from 'react-router';

const NavLink = (props, context) => {
  const isActive = context.router.isActive(props.to, true);
  const activeClass = isActive ? 'active' : '';

  return (
    <li className={activeClass}>
      <Link {...props}>{props.children}</Link>
    </li>
  );
}

NavLink.contextTypes = {
  router: PropTypes.object,
};

NavLink.propTypes = {
  children: PropTypes.node,
  to: PropTypes.string,
};

export default NavLink;

我应该如何测试它?我唯一的尝试是:

import NavLink from '../index';

import expect from 'expect';
import { mount } from 'enzyme';
import React from 'react';

describe('<NavLink />', () => {
  it('should add active class', () => {
    const renderedComponent = mount(<NavLink to="/home" />, { router: { pathname: '/home' } });
    expect(renderedComponent.hasClass('active')).toEqual(true);
  });
});

它不起作用并返回TypeError: Cannot read property 'isActive' of undefined。它肯定需要一些路由器模拟,但我不知道如何编写它。


感谢@Elon Szopos 的回答,但我设法写了一些更简单的东西(如下https://github.com/airbnb/enzyme/pull/62 https://github.com/airbnb/enzyme/pull/62):

import NavLink from '../index';

import expect from 'expect';
import { shallow } from 'enzyme';
import React from 'react';

describe('<NavLink />', () => {
  it('should add active class', () => {
    const context = { router: { isActive: (a, b) => true } };
    const renderedComponent = shallow(<NavLink to="/home" />, { context });
    expect(renderedComponent.hasClass('active')).toEqual(true);
  });
});

我必须改变mount to shallow为了不评价Link这给了我一个与反应路由器连接的错误TypeError: router.createHref is not a function.

我宁愿拥有“真正的”反应路由器而不仅仅是一个对象,但我不知道如何创建它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何模拟反应路由器上下文 的相关文章

随机推荐

  • 我对 for 循环中的 javascript let 和 var 感到困惑? [复制]

    这个问题在这里已经有答案了 这是我的循环代码 var username Sam Adarsh Rohit Rajat for var i in username console log username i 它的输出与需要的相同 但我不确定
  • 在Python中将整数转换为字符串

    如何将整数转换为字符串 42 42 For the reverse see How do I parse a string to a float or int https stackoverflow com questions 379906
  • 无法让 Ninject.Extensions.Interception 工作

    多年来我一直在努力弄清楚这是我们的 当我尝试将我的类与拦截器绑定时 我收到以下异常 Kernel Bind
  • 多参数类型同义词实例

    我试图弄清楚是否可以 以及如何 为多参数类型同义词定义类实例 例如 LANGUAGE MultiParamTypeClasses FlexibleInstances type F a b a gt b data DF a b DF a gt
  • OpenCl 代码可以在一台机器上运行,但我在另一台机器上收到 CL_INVALID_KERNEL_ARGS

    我有以下代码 它在一台机器上运行良好 但是当我尝试在另一台具有更好显卡的机器上运行它时 我收到错误 global 0 512 global 1 512 local 0 16 local 1 16 ciErrNum clEnqueueNDRa
  • SQL查询从多个表返回数据

    我想了解以下信息 如何从数据库中的多个表中获取数据 有哪些类型的方法可以做到这一点 什么是联接和并集 它们之间有何不同 与其他方法相比 我应该什么时候使用每一种方法 我计划在我的 例如 PHP 应用程序中使用它 但不想对数据库运行多个查询
  • 删除表中的最后一行

    我有一个简单的问题 我想删除表中的最后一行 我复制了一个删除选中行的函数 function deleterow tableID try var table document getElementById tableID var rowCou
  • 删除 Ruby 中字符串中的空白换行符

    我有一串由四个空白行组成的字符串 总共八行如下 str aaa n n nbbb n nccc ddd n 我想在一行中返回这一切 单行输出应如下所示 aaabbbcccddd 我使用了各种修剪功能来获取输出 但仍然失败 我在这里必须使用什
  • 如何使用 Axios 发布到 Django?

    我正在从 Jquery AJAX 迁移到 Axios 因为我使用的是 ReactJS 所以我认为它更干净 我在向服务器发布一个简单的请求时遇到了一些麻烦 post 方法会通过我的视图 但每当我print request POST 我有一个空
  • 无法在当前状态下启动设备:已启动

    在模拟器中运行 构建 运行 项目时 对 Xcode6 beta 中的 无法在当前状态下启动设备 已启动 错误的任何猜测 我刚刚在 Xcode 6 中运行我现有的项目 我发现了上面的消息 我尝试清理 删除派生数据 甚至重新启动模拟器也不起作用
  • 如何在 python concurrent.futures 中中断 time.sleep()

    我正在玩并发期货 https docs python org 3 library concurrent futures html 目前我未来的电话time sleep secs 看起来Future cancel https docs pyt
  • 如何从外部属性文件访问 pom.xml 中的变量?

    我需要通过一个键来获取值pom xml来自外部属性文件 属性文件的位置位于src main resources dev properties 我尝试通过使用 Maven 中的属性来解决这个问题 请帮我 pom xml
  • 多次使用 std::async 来执行小任务性能友好吗?

    为了提供一些背景信息 我正在处理一个保存的文件 在使用正则表达式将文件拆分为其组件对象后 我需要根据对象的类型来处理对象的数据 我目前的想法是使用并行性来获得一点性能增益 因为加载每个对象是彼此独立的 所以我要定义一个LoadObject函
  • android,如何在sqlitedatabase中执行sql文件

    我有 food db sql 文件存储在 res raw 文件夹中 它里面有大量的 插入 我的问题是如何执行文件并将数据放入我的 Android 应用程序中的 sqlite 数据库中 这是我的数据库代码 有什么建议么 private sta
  • 读取文本文件块

    我有一个文本文件 其中每隔几行后就会在行开头重复一个特定字符 没有 之间的线数不固定 我能够找出发生这种情况的那些行 我想读一下中间的那些行 using StreamReader sr new StreamReader text file
  • 在 MongoDB 上执行聚合/集合交集

    我有一个查询 在对示例数据集执行一些聚合后 将以下示例视为中间数据 fileid 字段包含文件的 id 以及包含对相应文件进行了一些更改的用户数组的用户数组 id fileid 12 user a b c d id fileid 13 us
  • 我如何学习 ASP.NET? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 添加带动画的子视图

    任何人都可以帮我添加带有动画的子视图吗 我想添加带有像 CATransition 这样的动画的子视图 但是对于这个类 我们只有几种不同的动画类型 但我正在寻找实现它自己的动画的能力 视图的不同部分出现在不同的时间 也许存在一些例子或其他东西
  • watchOS2 通知模拟器

    我在 XCode 上的 watchOS2 模拟器中遇到了一个奇怪的错误 我使用 UILocalNotification 处理通知并修改静态通知的情节提要 但是当我检查值 Wants Sash Blur 并构建时 它会出现与 Carousel
  • 如何模拟反应路由器上下文

    我有相当简单的反应组件 链接包装器 如果路由处于活动状态 则会添加 活动 类 import React PropTypes from react import Link from react router const NavLink pro