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

期望toContain文本来自jest、酶和React中的一组值

在Jest、Enzyme和React测试中,你可以使用toContain匹配器来检查文本是否包含在一组值中。以下是这些库的具体用法:

Jest

Jest的toContain匹配器用于数组或字符串,检查它们是否包含指定的值。

代码语言:javascript
复制
test('array contains value', () => {
  const array = [1, 2, 3];
  expect(array).toContain(2);
});

test('string contains substring', () => {
  const str = 'Hello, world!';
  expect(str).toContain('world');
});

Enzyme

Enzyme是一个用于测试React组件的库。你可以使用find方法结合text方法来检查组件的文本内容。

代码语言:javascript
复制
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

test('component contains text', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.text()).toContain('Expected Text');
});

如果你想检查组件内的某个特定元素是否包含文本,你可以使用find方法来定位该元素。

代码语言:javascript
复制
test('specific element contains text', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find('.specific-class').text()).toContain('Expected Text');
});

React Testing Library

React Testing Library鼓励编写更接近用户行为的测试。你可以使用screen.getByTextqueryByText来查找包含特定文本的元素。

代码语言:javascript
复制
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('component contains text', () => {
  render(<MyComponent />);
  expect(screen.getByText(/Expected Text/i)).toBeInTheDocument();
});

在这个例子中,/Expected Text/i是一个正则表达式,i标志表示不区分大小写。

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

相关·内容

前端自动化测试

前言 本文主要是介绍基于React+Ant Design(以下用Antd表示Ant Design)项目,在对于自己封装,或者基于Antd封装公共组件自动化测试技术选型实践。...toBe: 验证两个是否 === 完全相等 toHaveLength:验证长度 toBeDefined: 验证一个是否被定义 toContain: 验证一个list是否包含某一项 toBeCalled...mockReturnValue: mock函数被调用返回一个 EnzymeAPI更多着重于渲染react组件从dom树种检索指定节点 下面是三种渲染组件方法: shallow: 会渲染至虚拟...first: 返回集合第一个节点 at: 返回集合第n个节点 html: 获取节点HTML结构 text: 获取节点文本 一些用于组件交互方法: simulate: 模拟一个事件 setProps...即检查输入框是否为默认 测试清除按钮是否可用,通过模拟点击清除按钮,测试是否能按照预期清除输入框内填充默认 测试设置,点击输入框,弹出选择框,选择,检查输入框是否为选择

2K20

使用jest进行单元测试

今年不幸与坎坷使我有很长一段时间去思考人生,不想将就了,鲁棒健壮程序,开发测试应该是分得很开,于是我选择jest去做单元测试这件事。...jest相关配置 package.json相关scripts 这里笔者罗列了常用通用一些关于jest脚本,后面测试结果会陆续补充一些测试脚本,以上脚本都编写在package.json文件下...not 先说个最简单expect(received).not.toBe(expected),这句话意思就是表示否对,表示我断言、接收不等于期望。...toBe(expected) 这个API常用于断言,类型期望,也就是boolean、string、number、这些类型,用它做引用类型断言是不合适也不可取。...(expected) && toContainEqual(expected) toContain()跟期望类型,而toContainEqual() `可以是类型也可以是引用类型,表示包含。

3.6K60
  • 如何做前端单元测试

    我认为其中一个很大原因是很多人对单元测试认知不够,因此我写了这边文章,一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例,让你掌握写单元测试实践能力。...调查另一个有趣见解是,在大型组织单元测试更受欢迎。其中一个原因可能是,由于大型组织需要处理大规模产品,以及频繁功能迭代吧。这种持续迭代方式,迫使他们进行自动化测试投入。...Github stars & issues npm 下载量 Jest 下载量较大,一部分原因是因为 create-react-app 脚手架默认内置了 Jest, 而大部分 react 项目都是用它生成.../sum'; test('sum(2, 4) 不等于 5', () => { expect(sum(2, 4)).not.toBe(5); }) .toEqual 匹配器会递归检查对象所有属性属性是否相等...).toContain('jim'); }) 检查一些特殊(null,undefined boolean) toBeNull 仅匹配 null toBeUndefined 仅匹配 undefined

    3.3K20

    redux源码解读(二)测试环境搭建和代码测试

    (一)写了一个简易版redux,测试都是直接通工看命令行输出,显然这是不科学 所以就需要写测试了,所以。我选择了jest。 网上介绍如下…....配置简单测试环境按照官方文档 npm install --save-dev jest 把下面的内容添加到package.json { "scripts": { "test": "jest..."] } 这时候,在终端运行npm run test ,jest就会自动去运行项目目录下每一个xxx.test.jsxxx.spec.js 结合前面的简易store写了几个简单test样例 const...') expect(methods).toContain('replaceReducer') }); it('测试state初始', () => { const...如果错误是会报错,例如把初值期待写为-1 expect(store.getState()).toEqual({sum: -1}); 这样就会报错了,显示出来 ?

    35110

    Jest:给你 React 项目加上单元测试

    Jest 是一款轻量 JavaScript 测试框架,它卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 JestReact 组件进行测试。 为什么需要单元测试?...单元测试(Unit Testing),指的是对程序模块(最小单位)进行检查验证。比如一个函数、一个类、一个组件,它们都是模块。 使用单元测试优点: 更好地交付高质量代码。...; toContain:数组是否含有某个元素; toBeLessThan:是否小于某个,可以做性能测试,执行某个函数几千次,时间不能高于某个。...yarn create react-app jest-app --template typescript 执行单元测试命令为: yarn test CreateReactApp 内置了 Jest,...但 Jest 本身并不支持 React 组件测试 API,需要使用另外一个内置 React Testing Library 库来测试 React 组件。

    2.9K20

    Jest测试语法系列之Matchers

    关于Jest测试基础内容,可以参考之前博客:前端单元测试之Jest 本文主要讲的是匹配器(Matchers),匹配器(Matchers)是Jest中非常重要一个概念,它可以提供很多种方式来让你去验证你所测试返回...+ 2) 将返回我们期望结果,通常情况下我们只需要调用expect就可以,括号可以是一个具有返回函数,也可以是表达式。...后面的 toBe 就是一个matcher,当Jest运行时候它会记录所有失败matcher详细信息并且输出给用户,让维护者清楚知道failed原因,如果我们改成 toBe(5),将会输出错误提示...,如下图: toBe 是测试具体某一个,如果需要测试对象,需要用到toEqual。...有时需要区分undefined、nullfalse,这些可以使用Jest真实性匹配。

    54120

    React 组件测试技巧

    React 组件常见测试模式。 注意: 此页面假设你正在使用 Jest 作为测试运行器。如果你使用不同测试运行器,你可能需要调整 API,但整体解决方案是相同。...常见方法是使用一对 beforeEach afterEach 块,以便它们一直运行,并隔离测试本身造成影响: import { unmountComponentAtNode } from "react-dom...注意: act 名称来自 Arrange-Act-Assert 模式。 --- 渲染 {#rendering} 通常,你可能希望测试组件对于给定 prop 渲染是否正确。...注意,你需要在创建每个事件传递 { bubbles: true } 才能到达 React 监听器,因为 React 会自动将事件委托给 document。...在这个场景,你可以使用与它们渲染器相对应 act() 来包装更新。

    4.9K00

    使用storybook管理React组件

    create property 'dependencies' on boolean 'false' 我采用是手动创建方式 首先在React项目中手动添加@storybook/reactbabel...测试UI组件 4.1 写测试用例原因 找到bug 新修改没有改变已有的接口功能 将测试用例作为文档 4.2 测试结构 使用storyshots插件来实现,其核心是使用Jest,原理是每次生成一份DOM...-16'; enzymeConfigure({ adapter: new Adapter() }); 在stories/test.js编写测试用例: import React from 'react...4.4 测试样式 样式测试这里采用Puppeteer Jest来实现,其原理是利用Puppeteer无头chrome浏览器storybookurl绑定组件特点,来渲染不同UI组件,再进行图片快照对比...写在最后 本文是作者学习storybook一些总结,总体感觉是接入成本不算高,但是模块包版本安装可能会有一些坑,但收获是给组件管理、文档测试提供了一个一体化解决方案,还是很值得

    3.3K20

    【干货分享】微信小程序单元测试攻略

    总体来说,单元测试有以下一些好处: 1,及早发现代码错误,提高代码质量可维护性。 2,代码变更时可以快速进行检查。 然而要做好测试也有一定困难: 1,花费时间长。...根据组件传入属性有相对应DOM表现。 传入不同属性, 其组件产生内容、结构、样式变化也是可预计,例如: • 根据showCancel属性, 判断Cancel按钮是否展示。...• confirmStyle, titleStyle与实际样式是否一致。 2. 响应用户交互触发事件。..., 检测内容是否包含预期内容 expect(title.innerHTML).toContain('请确认提现金额'); expect(okBtn.innerHTML).toContain...如果cache没有该方法,再使用正常方式import。

    2.7K40

    为什么需要前端自动化测试呢?

    ,不同功能集成在一起,验证整体功能 ui测试 并不是只对ui设计效果验证,而是只对数据渲染、交互上验证 端对端测试 相对真实、完整链路模拟真实操作验证 在vue或react这种前端框架下,延伸出一种组件测试...项目进度压力不太大 开发比较规范,具有可测试性 具备大量自动化测试平台 测试人员具备较强编程能力 一些常见测试工具 单元测试(Unit Test)有 Jest, Mocha UI测试Test Render...渲染组件/执行条件/准备数据 行动(Act) 对系统执行操作,例如点击按钮、触发钩子函数 断言(Assert) 确保真实结果匹配你期望 单元测试开发案例 假设现在我们要开发一个按钮, 我们先来设计这个按钮功能...propsData: { size: 'small' } }) expect(wrapper.classes()).toContain...$emit('click', evt) } } } //省略样式 总结 在开发引入前端自动化测试,可以帮我们带来很多好处

    1.3K30

    从echarts-for-react源码中学习如何写单元测试

    ,作用是「浅复制objkeys」,如何判断它返回是期待结果?...函数后,希望它返回符合我期望 expect(pick({ a: 1 }, [])).toEqual({}); expect(pick({ a: 1 }, ['b'])).toEqual...,但它们是一样,也是可以 小结 对于有返回function,就是通过判断「返回」,是否与「期望」相等即可 这样好处: ① 当有新需求要扩展该函数时,可以保证该函数返回仍保持不变,进而不会影响到使用到该函数旧需求...② 当测试函数比较复杂时,非常方便,不用了解内部详细代码,只需返回符合期望即可 如何测试ReactComponent 当我写完一个React组件时,我该如何测试它呢?...()区别 ⑤ toEqual()toBe()区别 ⑥ 如何测试DOM节点上属性 ⑦ 如何测试React组件实例上属性 ⑧ 如何测试组件上props ⑨ jest.fn()作用 ⑩ 如何测试组件已卸载

    6.2K50

    React 组件进行单元测试

    无论是在代码初始搭建过程,还是之后难以避免重构修正bug过程,常常会陷入逻辑难以梳理、无法掌握全局关联境地。...,用于对参与测试做各种各样判断。...对于某些不容易构造或者不容易获取对象,用一个虚拟对象来创建以便测试测试方法 广义讲,以上 spy stub 等,以及一些对模块模拟,对 ajax 返回模拟、对 timer 模拟,都叫做..." ] } } } Enzyme Enzyme 来自于活跃在 JavaScript 开源社区 Airbnb 公司,是对官方测试工具库(react-addons-test-utils)...这个单词伦敦读音为 ['enzaɪm],酵素或意思,Airbnb 并没有给它设计一个图标,估计就是想取用它来分解 React 组件意思吧。

    4.3K40

    那些年错过React组件单元测试(上)

    Jest 关于Jest,我们参考一下其Jest 官网[1],它是Facebook开源一个前端测试框架,主要用于ReactReact Native单元测试,已被集成在create-react-app...如果React版本是15或者16,需要安装对应enzyme-adapter-react-15enzyme-adapter-react-16并配置。...在单元测试,我们可能并不需要关心内部调用方法执行过程结果,只想知道它是否被正确调用即可,甚至会指定该函数返回。这个时候,mock意义就很大了。...我们在测试也主要是用到了mock函数提供以下三种特性: 捕获函数调用情况 设置函数返回 改变函数内部实现 下面,我将分别介绍这三种方法以及他们在实际测试应用。...总结 到这里,关于前端单元测试一些基础背景Jest基础api就介绍完了,在下一篇文章,我会结合项目中一个React组件来讲解如何做组件单元测试。 ?

    5K20

    Jest来给React完成一次妙不可言~单元测试

    官方文档在这里[6],如果要指定的话,如下是对官方文档简单摘录: •container:React Testing库将创建一个div并将该div附加到文档。而通过这个参数,可以自定义容器。...有些实用程序允许您像用户那样查询DOM:通过标签文本、占位符标题查找元素。...以下是一些来自文档查询示例: •getByLabelText:搜索与作为参数传递给定文本匹配标签,然后查找与该标签关联元素。...接下来,我们可以使用 render 呈现App组件,并从方法获取 asFragment 作为返回。最后,确保App组件片段与快照匹配。...换句话说,我们检查 { counter } 文本内容是否等于0。

    14.9K33
    领券