[React Testing] Conditional className with Shallow Rendering
Often our components have output that shows differently depending on the props it is given; in this lesson, we go over how to compare the className
prop element tree output based on conditional input.
// LikeCounter.js import React from 'react';
import classnames from 'classnames'; const LikeCounter = ({count, isActive}) => {
return <a
className={
classnames({
'LikeCounter--active': isActive
})
}
href="#">Like: {count}</a>
} export default LikeCounter; // LikeCounter.spec.js
import React from 'react';
import expect from 'expect';
import expectJSX from 'expect-jsx';
import TestUtils from 'react-addons-test-utils';
import LikeCounter from './likeCounter'; describe('LikeCOunter', ()=>{ it('should be a link', ()=>{
const renderer = TestUtils.createRenderer();
renderer.render(<LikeCounter count={5} />);
const actual = renderer.getRenderOutput().type;
const expected = 'a';
expect(actual).toEqual(expected);
});
}); describe('active class', ()=>{
it('should have active class based on isActive props: true', ()=>{ const renderer = TestUtils.createRenderer();
renderer.render(<LikeCounter count={5} isActive={true}/>);
const actual = renderer.getRenderOutput().props.className.includes('LikeCounter--active');
const expected = true;
expect(actual).toEqual(expected);
}); it('should have active class based on isActive props: false', ()=>{ const renderer = TestUtils.createRenderer();
renderer.render(<LikeCounter count={5} isActive={false}/>);
const actual = renderer.getRenderOutput().props.className.includes('LikeCounter--active');
const expected = false;
expect(actual).toEqual(expected);
});
});
[React Testing] Conditional className with Shallow Rendering的更多相关文章
- [React Testing] Element types with Shallow Rendering
When you render a component with the Shallow Renderer, you have access to the underlying object. We ...
- [React Testing] className with Shallow Rendering
The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In ...
- [React Testing] Intro to Shallow Rendering
In this lesson, we walk through how to use one of React's Test Utilities (from thereact-addons-test- ...
- [React Testing] JSX error diffs -- expect-jsx library
When writing React component tests, it can be hard to decipher the error diffs of broken tests, sinc ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- React Testing All in One
React Testing All in One React 测试 https://reactjs.org/docs/testing.html jest 26.4 https://jestjs.io/ ...
- [React Testing] Children with Shallow Rendering
When testing React components, we often want to make sure the rendered output of the component match ...
- [React Testing] Reusing test boilerplate
Setting up a shallow renderer for each test can be redundant, especially when trying to write simila ...
- [React Testing] Setting up dependencies && Running tests
To write tests for our React code, we need to first install some libraries for running tests and wri ...
随机推荐
- crontab 配置
* * * * * (cd /opt/bd/www/crm/scripts/zb_insure; /opt/tuniu/php/bin/php /opt/bd/www/crm/scripts/zb_i ...
- JQuery 代码
http://baike.baidu.com/view/136475.htmhttp://www.cnblogs.com/gleamy_ming/archive/2009/04/29/1446492. ...
- Android开发手记(12) Menu的使用
Android中的Menu分为三种,分别为:OptionsMenu(选项菜单).ContextMenu(上下文菜单).SubMenu(子菜单). 1.OptionsMenu 按Menu键就会显示,用于 ...
- SQL 关于有单引号数据更新的问题
要把sql语句中包含有单引号的符号加入到数据库中的做法 )),''','123.com') 很简单就是加入id=''123'' 0'0就可以写成'0''0'
- UIGestureRecognizer手势
常用手势: 滑动,轻点,捏合,旋转,拖拽,长按 1.滑动(快速滑动) let swipeUp = UISwipeGestureRecognizer(target: self, action: Sele ...
- C++中getline函数的使用
代码: #include <iostream> #include <cstdio> using namespace std; int main(){ char* s; s = ...
- assert实现
测试网站在国内国外的访问速度 关于C的右左法则 assert宏的实现(一道笔试题) 2010-11-09 13:05:48| 分类: c | 标签: |举报 |字号大中小 订阅 asser ...
- 修改MYSQL最大连接数的2种方法
mysql默认最大连接数是100,增加加默认MYSQL连接数的方法有两个 方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini(windows) 或 my.cnf(linux环境)查找 ...
- 不能将值 NULL 插入列 'ID',表 'EupStoreDemoDB.dbo.OrderDiary';列不允许有 Null 值。INSERT 失败。
MVC,使用EF构建实体.将数据存入数据库,执行到_db.SaveChange()时,会报如下错误:
- 大整数算法[09] Comba乘法(原理)
★ 引子 原本打算一篇文章讲完,后来发现篇幅会很大,所以拆成两部分,先讲原理,再讲实现.实现的话相对复杂,要用到内联汇编,要考虑不同平台等等. 在大整数计算中,乘法是非常重要的,因为 ...