Setting up a shallow renderer for each test can be redundant, especially when trying to write similar tests that have slight tweaks. In this lesson, we go over how you can reduce some of the overlapping code so that each test only contains the unique pieces of the test.

describe('active class', ()=>{

    function renderLikeCounter(isActive){
const renderer = TestUtils.createRenderer();
renderer.render(<LikeCounter count={5} isActive={isActive}/>);
return renderer.getRenderOutput().props.className.includes('LikeCounter--active');
} it('should have active class based on isActive props: true', ()=>{
expect(renderLikeCounter(true)).toEqual(true);
}); it('should have active class based on isActive props: false', ()=>{
expect(renderLikeCounter(false)).toEqual(false);
});
});

[React Testing] Reusing test boilerplate的更多相关文章

  1. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  2. React Testing All in One

    React Testing All in One React 测试 https://reactjs.org/docs/testing.html jest 26.4 https://jestjs.io/ ...

  3. [React Testing] Children with Shallow Rendering

    When testing React components, we often want to make sure the rendered output of the component match ...

  4. [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 ...

  5. [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- ...

  6. [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 ...

  7. [React & Testing] Simulate Event testing

    Here we want to test a toggle button component, when the button was click, state should change, styl ...

  8. [React & Testing] Snapshot testings

    For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the ...

  9. [React Testing] The Redux Store - Multiple Actions

    When using Redux, we can test that our application state changes are working by testing that dispatc ...

随机推荐

  1. HTML <center> 标签

    浏览器支持 定义和用法所有浏览器都支持 <center> 标签. 对其所包括的文本进行水平居中. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,center 元素不被赞 ...

  2. 前端CSS兼容的一些思路

    半夜睡不着觉,起来写第一博. 近段时间,公司要给一个网站产品增加一个换色功能,安排我负责该事项. 之前参与过一些定制项目,是基于该产品的二次开发,说实话里面的前端结构很混乱.所以第一步就是将html前 ...

  3. C# - 使用 OLEDB读取 excel(不用Excel对象).

    参考: How to read from an Excel file using OLEDB 为了使用方便,我做成了工具类(OledbCommon.cs),好以后使用. 注:连接字符串中,Provid ...

  4. oracle单行函数之字符函数

    Lower--转换为小写 upper--转换为大写 Initcap--首字母大写 concat--连接字符 substr--截取字符 length/length--获取字符串长度(字节长度) inst ...

  5. linux初识-01简介

    什么是linux: Linux是一个自由的,免费的,源码开发的操作系统Linux的特点: 开放性.多用户,多任务,具有丰富的网络功能 可靠的系统安全 良好的可移植性 良好的用户界面(命令界面和图形界面 ...

  6. Secure CRT 如何连接虚拟机里面的CentOS系统 当主机使用有线网的时候 作者原创 欢迎转载

    1.虚拟机的网卡配置如下图所示: 2.在CentOS 5.8的命令行界面:输入如下指令 然后准备修改里面的网关地址和自己的IP地址 3.同时查看自己的IP地址和网关 4.在第二步里面修改,网关地址应该 ...

  7. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  8. CSS3+HTML5学习笔记(1)

    box内阴影: -moz-box-shadow:inset 30px #; -webkit-box-shadow:inset 30px #; box-shadow:inset 30px #; 多重文字 ...

  9. 遍历元素绑定事件时作用域是怎么回事啊,为什么要用this关键字,而直接使用元素本身就不行?

    如下代码,将this改为rows[i]为啥不起作用了 var rows = document.getElementsByTagName("tr"); for(var i=0;i&l ...

  10. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...