首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用jest+enzyme在react-native中选择元素(文本、视图)(主要是当文本/视图嵌套在组件中时)?

在React Native中使用jest+enzyme选择元素(文本、视图)的方法如下:

  1. 首先,确保已经安装了jest和enzyme。可以使用以下命令进行安装:
代码语言:txt
复制
npm install --save-dev jest enzyme enzyme-adapter-react-16 react-test-renderer
  1. 在项目的根目录下创建一个setupTests.js文件,并添加以下代码:
代码语言:txt
复制
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
  1. 在需要进行测试的组件文件中,导入所需的库和组件:
代码语言:txt
复制
import React from 'react';
import { Text, View } from 'react-native';
import { shallow } from 'enzyme';
  1. 编写测试用例,使用shallow方法来渲染组件,并使用find方法选择元素。例如,选择文本元素:
代码语言:txt
复制
describe('MyComponent', () => {
  it('should render the text element', () => {
    const wrapper = shallow(<MyComponent />);
    const textElement = wrapper.find(Text);

    expect(textElement.exists()).toBe(true);
    expect(textElement.text()).toBe('Hello World');
  });
});
  1. 运行测试用例,可以使用以下命令:
代码语言:txt
复制
npm test

这样就可以使用jest+enzyme在React Native中选择元素(文本、视图)了。请注意,以上代码示例中的MyComponent是一个自定义组件,你需要根据实际情况进行替换。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React-Native入门指南(一)

(4)xcode使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。...xcode项目中找到LaunchScreen.xib文件,点击,你会看到界面,这个就是启动界面,你手动添加组件或者修改文本即可,最好了解下xcode的使用。...也许,一款应用,你还没有完整的,有体系的构建UI组件,但是你一定或多或少有种想把组件抽出来的冲动,就像有些冲动是人类的本能一样....这是作为一个开发者的本能。那么组件的复用和统一化是十分必要的。...React-Native使用css来构建页面布局,使用Native iOS Components给我们提供强大的组件功能。目前已有组件如下图: ?...(元素)组件,定义了flex属性,表示该元素是可伸缩的。

2.3K10

移动跨平台框架ReactNative视图View【04】

React Native ,这一个一个豆腐块,我们称之为一个 视图。 React Native 视图组件 View 。...引入组件 React Native 中使用 View 组件首先需要引入她 import { View } from 'react-native' 使用语法 组件可以单独使用,也可以嵌套其它组件,例如嵌套文本组件...使用范例 React Native 视图组件 View 一般用于布局,也就是我们上面所说的划分一个一个豆腐块。...当我们需要将元素包装在容器,可以使用 作为容器元素一个元素只支持包含一个子元素,而我们又需要它支持多个子元素的时候,我们可以把这些子元素使用 来包装。然后元素作为那个元素的子元素。...相同的或不相同的两个或多个元素需要不同的展现样式的时候,我们可以把它们分别包装在不同的 。 然后分别设置每一个 元素的样式,比如 style 属性。 素作为那个元素的子元素

1K10
  • 【Hybrid开发高级系列】ReactNative(六) —— 与现有的应用程序集成(IOS)

    当你准备使用CocoaPods工作,添加以下行到 Podfile 。如果你没有,那么在你的项目的根目录下创建它。...没有pod 'React/RCTText',元素不能使用。...1.4 将容器视图添加到你的应用程序         现在,你应该为ReactNative组件添加一个容器视图。在你的应用程序它可以是任何的 。  ...// ReactView.h     #import     @interface ReactView : UIView     @end         一个视图控制器,想要管理这一视图,继续添加一个出口并将其连接...1.5 为容器视图添加RCTRootView         ReactView.m,我们首先需要用index.ios.bundle的URI启动 RCTRootView。

    26420

    【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

    1.2 iOS日期选择器         使用DatePickerIOS来iOS上呈现一个日期/时间选择器(selector)。...testID字符串型         端到端测试用于定位视图 描述 href="https://github.com/facebook/react-native/blob/master/docs/Text.md..." 3.6 容器         元素是与布局设计有特定关系的:内部的一切都不再使用flexbox布局而是使用文本布局。...我们不需要对每一个单一的元素都要有一个FontFamily模块,并且我们每一次显示一个文本节点也不需要对树遍历到根节点。...默认情况下,标签是通过遍历所有孩子和累积所有由空间隔开的文本节点创建的。     accessible布尔型         它的值为真,说明视图是一个可访问的元素

    55740

    ReactJS和React-Native的主要区别在哪里

    本文中,我将介绍作为ReactJS网页开发人员在学习使用React-Native并用其构建一些原生app,此时我遇到它们间的主要差别。...的样式表示例 我不知道你,但即使Flexbox已经有一段时间了,我从来没有完全沉浸于其使用,主要是因为我涉及的项目需要与旧版浏览器的向后兼容性。...PanResponder需要应用于您的组件的View(或文本或图像)以启用此视图上的触摸处理程序。...我建议您将组件的主要逻辑定义一个名为index.js的文件,然后您将使用单个文件定义演示组件。...开发者工具 您启动新的本机项目,您可以从React获得几个开发人员工具,而无需安装任何内容,这在我看来非常棒。您需要对应用程式的样式做小修改时,非常适合使用热加载。

    17K30

    react-native布局与组件

    alignItems:RN默认: ‘stretch’,Web Css默认 flex-start’,也就是说RN的flex是强制等高的。...因为前者”借用了”这些组件概念。 简单认知的话,组件和UI框架差不多,用什么引什么。以下对某些重要组件进行介绍。 view:万能容器 视图布局容器,可以理解为原生开发的万能容器。...Text内部的元素不再使⽤flexbox布局,而是采⽤用文本布局。这意味着内部的元素不再是】一个个矩 形,而可能会在行末进⾏折叠。...//点击事件 selectable={true}//决定⽤用户是否可以⻓长按选择文本,以便便复制和粘贴。...ListView底层实现,渲染组件Item是全量渲染,而且没有复用机制,渲染较⼤数据量,会不可避免地卡顿。

    5.2K20

    最新iOS设计规范四|3大界面要素:视图(Views)

    标题显示活动视图中的图标下方。短标题最好。标题太长,iOS首先缩小文本,然后如果标题仍然太长直接将其截断。一般来说,请避免标题中包含你的公司名称或产品名称。 确保活动适合当前上下文。...将“取消”按钮作为默认按钮,并使用粗体文本。 允许用户通过退出APP到屏幕来取消警示框。警示框出现时,退出到屏幕可以退出APP。这个操作产生与点击取消按钮的效果是相同的。...滚动视图的缩放选项被打开,设置比较合适的最大及最小值。例如:放大文本直到一个单一的字符充满整个屏幕,即使其可能对于大部分应用来说是没有意义的。 滚动视图处于页面模式考虑显示页面控制元素。...拆分视图提供与选项卡栏相同的快速导航,同时更好地利用了大屏幕。 为每种类型的列选择适当的样式。对于显示侧栏的列,请使用侧栏外观。此外观适用于应用程序级导航和集合列表,例如Mail的邮箱。...对于显示列表视图的补充列,请使用普通边栏外观。这种外观适合于单个内容的列表,例如邮箱的消息。 主要和补充列持续突出显示任务选择

    8.5K31

    React-Native爬出,我记下了这些

    上一篇文章 React开发者初次走进React-Native的世界 前言 最近因为业务需要,做了一些关于React-Native方面的开发,对一些自己遇到的问题做了记录。...正文 1.对于背景,可以使用组件 2.字符串不写在组件里面会报错的,比如写在View组件下面的话 3.Web溢出时候有内部滚动条的div,RN则是对应使用...ScrollView组件 4.Web我们使用click处理点击事件,RN要用Touchable组件的onPress事件 5.对于导航,我们可以使用React-Navigation。...不用再畏手畏脚了,因为这里是移动端 9.如果要获取某个组件屏幕的位置组,可以利用组件布局完毕触发的onLayout方法,可以在这里获取组件的位置,但令人遗憾的是,这个方法是异步的,异步的特征可能会与你的需求冲突...,还是会出现内层视图超出外层的情况 21.RN 带背景的Text自适应文字内容宽度的方法实现 使用RN的文本的时候,遇到了一件比较无语的事情,就是我想写一个类似“文本标签”的样式,就是一段可变长度的文本

    2.3K30

    【Hybrid开发高级系列】ReactNative(六) —— ReactNative开发技巧总结

    2.使用终端命令运行项目:          cd 该项目文件夹           react-native run-ios    3.WebStorm运行,点击右下角的图标,选择Terminal...• View.props.onMoveShouldSetResponder: (evt)=> true,——视图不是应答器,该指令被视图上移动的; 触摸调用:这个视图想“声明”触摸响应吗?...这意味着,多个视图为 *ShouldSetResponder 处理程序返回true,最深的组件会成为应答 器。大多数情况下,这是可取的,因为它确保了所有控件和按钮是可用的。         ...然而,有时父组件会想要确保它成为应答器。这可以通过使用捕获阶段进行处理。应答系统从最深的组件冒泡,它将进行一个捕获阶段,引发 * ShouldSetResponderCapture 。...所以如果一个父视图要防止子视图触摸开始成为应答器,它应该有一个 onStartShouldSetResponderCapture 处理程序,返回true。

    30540

    React Native学习笔记(三)—— 样式、布局与核心组件

    只需要知道我们之所以要使用一个独立于设备分辨率的单位,主要是为了让应用在不同分辨率的设备,看起来一致。 RN,同样也拥有一个类似于dp的长度单位。...Flexbox 布局 1.6.1、flexbox概要 RN 中使用 flexbox 规则来指定某个组件的子元素的布局,flexbox 可以不同屏幕尺寸上提供一致的布局结构 flexbox 术语...axis) 1.6.2、flex属性 flex 属性决定元素主轴上如何 填满 可用区域。...的组件 原生组件 Android 开发使用 Kotlin 或 Java 来编写视图 iOS 开发使用 Swift 或 Objective-C 来编写视图。... React Native ,则使用 React 组件通过 JavaScript 来调用这些视图。在运行时,React Native 为这些组件创建相应的 Android 和 iOS 视图

    14.2K31

    Material Design —卡片(Cards)

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS组件(顺便学学英语),以便今后使用的时候完全不虚...但是,它们卡内的大小和位置取决于图像是主要内容还是用于补充卡片上的其他内容。 背景图像 文字放置纯色背景上,文字清晰度最高,且文字对比度足够高。 放置图像背景上的文本应该保留文本的易读性。...pc端卡片可展开和内部滚动 卡片聚焦 遍历卡片上的焦点移动到下一张卡片之前访问所有可聚焦元素。...UI控件 与内容内联放置的UI控件(如滑块)可以修改内容的视图。 例如,可以选择日期的滑块,评分内容的星星,或选择日期范围的分段按钮。 ? ? ? 溢出菜单(可选) 溢出菜单通常放置卡的右上角。...但能改善内容布局和易读性,则可以将其放置右下角。 注意不要让溢出菜单负荷的操作太多。 ? 其他操作 强烈建议不要在文本内容中使用内联链接。

    4.3K100

    React Native备课笔记Day01一、React Native介绍二、特点分析三、推荐网站以及运行第一个react native项目四、环境搭建五、React Native文件结构六、View

    //视图组件 }from 'react-native'; 这段代码表示引入react native组件。...rn要运用到这些组件就必须要引入。如果打开项目的简介会发现有三百多兆,这是因为node_modules文件夹包含了所有的react-native组件。...7.1样式 web环境,我们通常使用分离的样式表文件,那么在这些传统的样式设计的使用上可能会产生各种问题,比如说CSS规则和类名都在全局作用域里,如果不注意,一个组件的样式可能会影响到其他的组件。...但是这只是默认状态下,而主轴和侧轴的方向是可以根据属性的值而发生改变的。 flexDirection属性 它定义了父视图中的子元素沿主轴方向的排列方式。...写一个文本框和一个文字组件文本框内容发生变化的时候,触发一个回调函数,然后回调函数取出文本框的text值然后赋给下面的Text组件。 首先要使用文本框就要导入TextInput组件

    3.8K110

    ReactJS到React-Native,架构原理概述

    组件编写视图编写Web 环境的React 视图最终需要渲染成普通的HTML 元素(、、、 等)。...这些组件因平台而不同,因此使用React Native 如何组织你的组件变得尤为重要。...使用React Native ,如果你想复用代码,那么这些组件的抽象分离就至关重要。当然,如果一个组件渲染 元素,那它显然不能在Android 平台复用了。...不过,如果一个组件封装的是关联逻辑,那就可以被复用。因此,视图组件可以根据平台进行替换选择。...Flexbox构建响应式App的最佳选择——CSS的表现不太一致,React-Native并不是为web元素而生,不能像web 应用在html里面使用CSS这里还是体现了Weex优势维度React NativeWeex

    5.4K10

    ReactJS到React-Native,架构原理概述

    组件编写视图编写Web 环境的React 视图最终需要渲染成普通的HTML 元素(、、、 等)。...这些组件因平台而不同,因此使用React Native 如何组织你的组件变得尤为重要。...使用React Native ,如果你想复用代码,那么这些组件的抽象分离就至关重要。当然,如果一个组件渲染 元素,那它显然不能在Android 平台复用了。...不过,如果一个组件封装的是关联逻辑,那就可以被复用。因此,视图组件可以根据平台进行替换选择。...Flexbox构建响应式App的最佳选择——CSS的表现不太一致,React-Native并不是为web元素而生,不能像web 应用在html里面使用CSS这里还是体现了Weex优势维度React NativeWeex

    6K10

    怎样 Unity 创建 UI

    Unity 3D 提供了许多 UI 组件,你都可以在你的游戏中使用它们。在这篇文章,我会指导你 unity 的菜单如何创建一个简单的暂停菜单。...检视视图中,找到『Render Mode』然后选择『Screen Space – Camera』。 从层级视图中拖拽摄像机到检视视图中 Canvas 的『Render Mode』上。...Unity 可以使用文本,它允许你使用标记 tag 值来修改文本的外观。本例,我们指定粗体,红色字体。为了让所做的修改显示,你必须关闭一个 tag 。你可以 这里 了解更多。...我主要是想用这个 tag 来展示这个教程的富文本功能。 如何创建你的按钮: 下面我门将会创建三个按钮。uinty 已经内建了按钮组件,这可以让你在游戏中按钮被按下的时候来响应某些事件。...让这些按钮起作用之前,让我们菜单添加最后一个组件 层级视图中右键点击『Panel』对象 选择 UI –> Text 左键点击这个新文本对象并且改变文本内容为『Time Since Startup

    5.6K20

    【Hybrid开发高级系列】ReactNative(四) —— 基础开发技巧

    1.2 Props(属性)         大多数组件创建就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。         ...Flexbox布局         我们React Native中使用flexbox规则来指定某个组件的子元素的布局。...你其实已经不知不觉地接触到了场景——在前面的教程,“编写HelloWorld”、“使用Flexbox布局”、“如何使用ListView”组件都是完整的场景示例。         ...然而,AppStateIOS桥接器上检索currentState启动它将会为空。...React Native里,我们都是自动对这些元素进行舍入。         进行舍入时,我们必须相当的小心。你永远不希望同一使用正常值和四舍五入的值,那就好像你正在不断的积累舍入误差。

    40720

    SAP S4 HANA业务伙伴工具集(BDT)

    要是SAP S/4 HANA on-premise和私有云版本。引言什么是BDT?BDT即Business Data Toolset,意思是“业务数据工具集”,是维护数据和简单事务数据的中心工具。...查看属性事件功能模块 1 输出前(PBO):例如,选择并显示文本 2 输入后(PAI):字段检查 3 屏幕调用(PBC)之前:排序表,显示第一个条目 仅在以下情况下显示视图 1 视图应用程序处于活动状态...2 视图被分配给要维护的对象 子屏幕的流程逻辑 1 PBO调用功能模块BUS_PBO(字段修改,消息) 2 PAI调用功能模块BUS_PAI(确定光标位置) 数据集的特殊重要性另一个有趣的点是如何处理角色和技术元素之间的连接...系统是如何管理这一点的?每个视图都被分配给视图定义的数据集。所选数据集被分配给所谓的BP视图(事务BUSD)。请记住,视图定义,数据集BUP010被分配给视图BUP240(组织:法律形式)。...无论何时BP事务中选择角色FLCU01,都会使用所有分配的数据集和带字段的视图来调用BP视图FLCU01。这整组字段组现在由定制的字段修改(显示/强制/隐藏/可选)控制。

    49530

    React Native组件篇(三) — TextInput组件

    TextInput是什么       文本输入框,相当于iOS我们熟悉的UITextField,通过键盘输入并显示内容。       两者属性有很大相同之处,下面大家一起看一下。...布尔型 如果你真想要它表现成一个控制组件,你可以将它的值设置为真,但是按下按键,并且/或者缓慢打字,你可能会看到它闪烁,这取决于你如何处理 onChange 事件。...enablesReturnKeyAutomatically 布尔型 如果值为真,没有文本的时候键盘是不能返回键值的,文本的时候会自动返回。默认值为假。...onBlur 函数 文本输入是模糊的,调用回调函数 onChange 函数 文本输入的文本发生变化时,调用回调函数 onFocus 函数 输入的文本是聚焦状态,调用回调函数 returnKeyType...,TextInputreact-native 里面,那我们去找一下,看看可以找到不。

    2.2K20

    React Native探索之组件的属性和状态

    前言 Android或者iOS开发我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native组件也有属性、样式和状态。...再运行程序,就会发现"点击文本"变为蓝色了。实际开发,style属性会变得越来越复杂,因此我们可以使用StyleSheet.create来集中定义组件的样式。...注释2处用到了view组件,它是一个基础组件支持Flexbox布局、样式和一些触摸处理等,可以放到其他视图里也可以包含子视图。...2.State(状态) 组件的属性设置完毕后,组件的生命周期中就不会改变,如果想要改变属性,我们可以使用State,例子如下。...最后注释5处使用我们自定义的Flash组件,将text作为Flash组件的属性并设值。运行效果如下所示。 ?

    2.1K30
    领券