React Jest测试

一、

 1 var jest = require(‘jest‘);
 2
 3 jest.dontMock(‘../CheckboxWithLabel.js‘);
 4 describe(‘CheckboxWithLabel‘, function() {
 5     it(‘changes the text after click‘, function() {
 6         var React = require(‘react/addons‘);
 7         var CheckboxWithLabel = require(‘../CheckboxWithLabel.js‘);
 8         var TestUtils = React.addons.TestUtils;
 9         var checkbox = TestUtils.renderIntoDocument( < CheckboxWithLabel labelOn = "On"
10             labelOff = "Off" / > );
11         var label = TestUtils.findRenderedDOMComponentWithTag(checkbox, ‘label‘);
12         expect(label.getDOMNode().textContent).toEqual(‘Off‘);
13         var input = TestUtils.findRenderedDOMComponentWithTag(checkbox, ‘input‘);
14         TestUtils.Simulate.change(input);
15         expect(label.getDOMNode().textContent).toEqual(‘On‘);
16     });
17 });
时间: 2024-10-22 14:05:07

React Jest测试的相关文章

Mocha 与 Jest 测试框架比较

一.Jest 什么是Jest? Jest是由facebook发布的,最近比较火热的一个测试框架. Jest的优势 (1)Jest容易安装配置 Jest可以说是零配置的,它会自动识别一些测试文件.只要用npm安装jest之后运行jest,即可完成测试,非常容易. (2)Jest提供snapshot功能 snapshot功能能够确保UI不会意外被改变.Jest会把结果值保存在一个文件当中,每次进行测试的时候会把测试值与文件中的结果值进行比较, 如果两个结果值不同,那么开发者可以选择要么改变代码,要么

react.js 测试

<html>    <head>        <title>hellow</title>        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/

vue and jest测试

测试Vue的filters方法: 局部: import Page from '../src/Page' it('filter', () => { const case = Page.filters.toLowerCase('HI') expect(case).toBe('hi') }) 全局: Vue.options.filters.toLowerCase('HI').toBe('hi')在其他测试页面中只需引入filter即可eg: import {toLowerCase} from 'fil

NodeJs和ReactJs单元测试工具——Jest

Jest——Painless JavaScript UnitTesting 特点 适应性强 默认使用Jasmine断言 模块化的 可扩展的 可配置的 沙箱式且快速 虚拟化JS环境,模拟浏览器 并行运行工作线程 默认的模拟框架 默认自动模拟所有模块,便于测试当前代码 集成Babel 必要性 支持ES6标准语法 支持React特定语法 安装组件 npm install --save-dev babel-jest babel-polyfill 配置babel { "presets": [&q

React+Redux实现追书神器网页版

引言 由于现在做的react-native项目没有使用到redux等框架,写了一段时间想深入学习react,有个想法想做个demo练手下,那时候其实还没想好要做哪一个类型的,也看了些动漫的,小说阅读,聚合资源的开源项目.但是由于正好在学习开源的Android小说阅读器--任阅,加上api比较全,开始边学边做,项目地址在这里,如果有好的意见欢迎提issue或pr. 效果图 目录结构 ├─actions #redux的action,业务逻辑 ├─components #页面容器 │ └─common

React躬行记(16)——React源码分析

React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版本很接近. 一.目录结构 React采用了由Lerna维护monorepo方式进行代码管理,即用一个仓库管理多个模块(module)或包(package).在React仓库的根目录中,包含三个目录: (1)fixtures,给源码贡献者准备的测试用例. (2)packages,React库提供的包的

React 还是 Vue: 你应该选择哪一个Web前端框架?

学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西,请使用Vue    如果你的应用需要尽可能的小和快,请使用Vue    如果你计划构建一个大型应用程序,请使用React    如果你想要一个同时适用于Web端和原生App的框架,请选择React    如果你想要最大的生态圈,请使用React    如果你已经对其中一个用得满意了,就没有必要换了

使用Jest对React-Native做单元测试

环境搭建: 1.安装react-native开发环境 npm install -g react-native-cli 2.安装jest测试环境 npm install -g jest-cli --save-dev 测试步骤: 1.创建react-native项目 react-native init HelloWorld 2.创建__tests__目录 cd HelloWorld && mkdir __tests__ 3.修改package.json vim package.json { .

深入浅出React和Redux pdf

下载地址:网盘下载 内容简介  · · · · · · 本书作者是资深开发人员,有过多年的开发经验,总结了自己使用React和Redux的实战经验,系统分析React和Redux结合的优势,与开发技巧,为开发大型系统提供参考.主要内容包括:React的基础知识.如何设计易于维护的React组件.如何使用Redux控制数据流.React和Redux的相结合的方式.同构的React和Redux架构.React和Redux的性能优化.组件的测试等. 作者简介  · · · · · · 程墨 资深架构师