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

使用Jest和enzyme在更改模拟时不更新值时反应输入

Jest和Enzyme是一对常用于前端开发的测试工具。Jest是一个基于JavaScript的测试框架,而Enzyme是一个用于React组件测试的工具库。

在使用Jest和Enzyme进行模拟测试时,如果更改了模拟的值但没有更新组件的状态,那么输入框的值不会反应这个变化。这是因为Jest和Enzyme的模拟测试是在虚拟环境中进行的,不会真正地触发组件的更新。

为了解决这个问题,可以使用Enzyme提供的simulate方法来模拟用户输入并触发组件的更新。具体步骤如下:

  1. 导入所需的库和组件:
代码语言:txt
复制
import { mount } from 'enzyme';
import YourComponent from './YourComponent';
  1. 创建一个模拟的事件对象,并设置输入框的值:
代码语言:txt
复制
const event = { target: { value: 'new value' } };
  1. 使用mount方法将组件渲染到虚拟DOM中:
代码语言:txt
复制
const wrapper = mount(<YourComponent />);
  1. 找到需要测试的输入框元素,并使用simulate方法模拟用户输入:
代码语言:txt
复制
wrapper.find('input').simulate('change', event);
  1. 断言输入框的值是否已更新:
代码语言:txt
复制
expect(wrapper.find('input').prop('value')).toEqual('new value');

这样,通过模拟用户输入并触发组件的更新,就可以测试输入框的值是否正确更新了。

推荐的腾讯云相关产品:腾讯云函数(Serverless Cloud Function),它是一种无需管理服务器即可运行代码的计算服务。腾讯云函数提供了一个灵活、可扩展且低成本的方式来运行您的代码,适用于各种应用场景,包括Web应用、后端服务、数据处理、自动化任务等。您可以通过腾讯云函数来部署和运行您的前端、后端代码,并进行相应的测试。

腾讯云函数产品介绍链接地址:腾讯云函数

相关搜索:使用酶和React时,输入未使用模拟更改进行更新在输入模拟中使用名称和值属性时发生冲突即使在使用ngOnChanges时,在父组件中也会更改Angular @Input()不更新值是否可以在更新Firestore文档时动态更改键和值?使用React Native和Hooks时,在Jest测试期间不会更新状态尝试使用VBA更改值时,该值在IE中未更新在Vuejs中更改v-model输入值时,动态数据不会更新为什么vmin和vmax在使用seaborn时不更新colorbar?在Rails中,在使用迭代和枚举时更改显示值?尝试在中使用junit5和mockito模拟byte[]值时为空值使用ThemeProvider更改用户在单击按钮时输入的主题颜色值在Ruby on Rails中使用表单编辑和更新时如何更改按钮标题如何使用Jest和Spectator对使用反应式表单作为输入的子组件进行单元测试时解决此错误?当用户在nodejs中更改密码时,如何更新mongoDB中的salt和Hash值?如何使用viewHolder使listView用户输入在滚动出屏幕时不返回默认值如何在不更改选择框值的情况下,在选中selectbox时更改html中的输入框的值如何使用AJAX和JavaScript在更改一个下拉列表时更新并保存它使用jQuery和ajax在第二次点击时更新星号的值如何使用primefaces在勾选或不勾选<p:calendar>时更改启用/禁用<p:selectBooleanCheckbox>和<p:inputTextarea>?在MatLab上使用ODE45时,输入带有多个小数位的数字作为初始X值和速率常量会导致错误消息
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 测试系列实战(二):深层渲染快照测试

如果你不了解单元测试集成测试这两个术语,可以看下本系列第一篇教程。 测试与 DOM 的交互或者处理高阶组件,mount 函数也可以派上用场。..._Mount 使用 DOM 实现的模拟Jest 默认使用的是 jsdom。我们可以通过调整 testEnvironment 属性更改。 快照测试 快照测试是 Jest 的一大招牌功能。...输入以下命令,一键更新所有快照: npm test -- -u 实际上,目前 CRA 默认会在监听模式下运行 Jest,我们可以一个个更新冲突的快照。...首先运行 npm test ,然后输入 i 以交互方式更新失败的快照。官方的 Jest 文档提供了一个动画来展示这个过程: ?...- END - ● JavaScript 测试系列实战(一):使用 Jest Enzyme 测试 React 组件● 你不知道的 Npm(Node.js 进阶必备好文)● 用动画实战打开 React

2.1K20

干货 | 携程租车React Native单元测试实践

较大规模的前端项目中,测试对于保证代码质量十分重要,而React的组件化函数式编程, 这种相同输入一定返回相同输出的幂等特性特别适合单元测试。...有以下几个特点: 简单易用:易配置,自带断言库mock库。 快照测试:能够创造一个当前组件的渲染快照,通过上次保存的快照进行比较,如果两者匹配说明测试失败。...1.2 Enzyme Enzyme是AirBnb开源的React测试工具库,通过一套简洁的api,可以渲染一个或多个组件,查找元素,模拟元素交互(如点击,触摸),通过Jest相互配合可以提供完整的...当主动修改造成ui变化时,使用jest -u来更新快照。..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 使用React或者React Native通常会使用Redux进行状态的管理,需要mock store

6.1K30
  • JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互

    在这篇教程中,我们将学习如何测试更复杂的组件,包括用 Mock 去编写涉及外部 API 的测试,以及通过 Enzyme 来轻松模拟组件交互 初次尝试 Jest Mock 我们的应用程序通常需要从外部的...在编写测试,外部 API 可能由于各种原因而失败。我们希望我们的测试是可靠独立的,而最常见的解决方案就是 Mock。...打开 TodoList 的测试文件,首先在最前面通过 jest.mock 配置 axios 模块的 Mock(确保要在 import TodoList 之前), Mock 之后,无论测试还是组件中使用的都将是...我们测试的第一件事是检查修改输入是否更改了我们的状态: 我们修改 app/components/TodoList.test.js 如下: import React from 'react'; import...我们用它来模拟事件。它第一个参数是事件的类型(由于我们输入使用onChange,因此我们应该在此处使用change),第二个参数是模拟事件对象(event)。

    4.8K20

    【React总结(三)】React 组件自动化测试与持续集成指北(1)

    内联样式: 为了测试内联样式,需要使用测试中的样式复制对象。如果对象样式更改,则必须在测试中也更改它们。记住一条不要在测试用例中复制组件的代码。你经常会忘记在测试中更改它。.../enzyme 通过 Snapshot 进行测试 Snapshot 是一个很有用的测试工具,它让我们可以第一间在用户界面这个层级上知道页面是否被修改。...如果组件发生了变更,到那时没有生成新的 snapshot ,那么当跑 npm test 的时候,新的 __snapshots__ 文件夹会被生成,并且 test 不会通过,因为这次的 snapshot 之前的匹配...2、测试 props 测试 props 主要分为两步走: 首先是先传入一个默认,或者是,看组件是否正常通过 defaultProps 进行组件的渲染。...3、模拟事件的触发来测试组件 通过 snapshot 测试 props 测试,已经能确保组件是可以正常渲染的了,但是这还远远不够,因为有很多分支代码我们是没有覆盖到的,如果你查看 jest --coverage

    2.4K80

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

    Jest特点: 零配置 快照 隔离 优秀的 api 快速且安全 代码覆盖率 轻松模拟 优秀的报错信息 Enzyme Enzyme是Airbnb开源的React测试工具库,提供了一套简洁强大的API,并内置...t: 测试用例的名称包含输入的名称的测试用例 a: 运行全部测试用例 测试过程中,你可以切换适合的模式。...上面的代码用匹配符可以改写为: // 使用'.resolves'来测试promise成功返回的 it('使用'.resolves'来测试promise成功的情况', () => { return...expect(user.getUserById(4)).resolves.toEqual('Cosen'); }); // 使用'.rejects'来测试promise失败返回的 it('使用'....单元测试中,我们可能并不需要关心内部调用的方法的执行过程结果,只想知道它是否被正确调用即可,甚至会指定该函数的返回。这个时候,mock的意义就很大了。

    5K20

    年轻,我写单元测试

    如果你已经有了答案,欢迎下方指正) 基于此,笔者希望在前端编写测试用例能够实现以下的目标: 先保证一个一个的模块基础功能正常 增加新功能,原有功能不受影响 本着实现以上的要求,笔者下来介绍下具体的使用...,关于不同测试框架的重点,这篇文章就不详细展开了,最终结合我们的项目,最终采用了facebook的jest+enzyme。...但是仔细想想,这其实就违背了我们单元测试的初衷,笔者这里也大胆猜测下,jest官方实现这个功能的时候,应该也只是想记录下一步一步的事件后,当前组件的html结构,对比上一次的快照,来看功能是否符合预期...一开始我觉得单元测试很鸡肋的原因也是没有深入了解它,这次发现就算是业务结合很紧密的组件,也能够模拟正常的操作,这里就贴一个redux结合的组件来举例 import React from 'react...更新一个bug fix,高阶组件下,我们需要调用wrapper.update(); 这里是issue 更新一个jest全局变量包

    86920

    如何自动化测试 React Native 项目 (下篇) - 单元测试

    Jest Snapshot Test的特点: Jest 使用一个 test renderer 来生成出 React tree 的序列化结构树。...Jest 的 snapshot 测试不仅可以对比React tree结构的区别, 也可以对比其他可序列化的的区别。 比如对比Redux某个状态的state是否之前相同。...当 snapshot 结果需要升级更新, 只需要执行 jest -u 指令即可更新之前生成的 snapshot 结果。 为什么 Snapshot React 测试中是可靠的呢?... React(以及 React Native ) 的开发理念中, 开发者把重点放在描述要显示的组件不同输入时的静态状态,然后交给React去处理UI的更新。...最近的 enzyme 版本更新后, shallowWrapper 的 component lifecycle 函数也会被正确的调用。因此对组件状态的测试是比较容易的。

    3.3K21

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

    /src/utils'; // 把遇到的计时器挂起,必要,再使用jest.runOnlyPendingTimers执行掉已经挂起的计时器 jest.useFakeTimers(); // 描述块,将多个...() 作用: 把遇到的计时器挂起,必要,再使用jest.runOnlyPendingTimers执行掉已经挂起的计时器 这里使用jest.useFakeTimers()的目的就是暂停正在执行的timer...,但它们的是一样的,也是可以的 小结 对于有返回的function,就是通过判断「返回」,是否与「期望」相等即可 这样的好处: ① 当有新需求要扩展该函数,可以保证该函数的返回仍保持不变,进而不会影响到使用到该函数的旧需求...enzyme.mount()生成完整的React组件 ② mount()/shallow()/render()的区别如下: [1] mount()借助jsdom模拟浏览器环境,并提供DOM api生命周期的支持...() 作用: 新建mock function 进行单元测试,应该将关注点放在「测试目标」上,而onChartReady作为被依赖的function,不管它的内部发生了什么,都与「测试目标」无关,只需关注返回的

    6.2K50

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

    •baseElement:如果指定了容器,则此默认为该,否则此默认为document.documentElement。这将用作查询的基本元素,以及使用debug()打印的内容。...触发事件通常会触发应用程序中的一些更改,因此我们必须执行一些断言来确保这些更改发生。我们的测试中,这样做的一个好方法是确保呈现给用户的计数已经更改。...当您进行更新或重构,并希望获取或比较更改时,它会提供很多帮助。 现在,让我们看一下 App.js 文件的快照。...为此,我们必须在jest.mock('axios')的帮助下模拟axios请求。 现在,我们可以使用axiosMock并对其应用get()方法。...最后,我们将使用Jest函数mockResolvedValueOnce()来传递模拟数据作为参数。 现在,对于第二个测试,我们可以单击按钮来获取数据并使用async/await来解析它。

    14.9K33

    JavaScript 测试系列实战(一):使用 Jest Enzyme 测试 React 组件

    您可以测试应用程序的许多方面,从单个函数及其返回浏览器中运行的复杂应用程序。万丈高楼平地起,让我们先来了解一下有哪些测试。...单元测试应该是相互隔离独立的。对于给定的输入,单元测试检查结果。通过及早发现问题并避免 bug 回归,它可以帮助我们确保代码的各个部分按预期工作。...E2E 测试的重点是我们正在运行的应用程序中模拟实际用户(例如模拟滚动、单击键入等行为),并检查我们的应用程序是否从实际用户的角度运行良好。...它允许我们在运行测试,只渲染父组件而渲染其所有的子组件。浅层渲染十分快速,因此非常适合单元测试。...配置 jest-enzyme 你应该还记得,刚才的测试代码中,我们还是使用Jest 自带的 Matcher(toEqual)。

    3K10

    使用storybook管理React组件

    测试UI组件 4.1 写测试用例的原因 找到bug 新修改没有改变已有的接口功能 将测试用例作为文档 4.2 测试结构 使用storyshots插件来实现,其核心是使用Jest,原理是每次生成一份DOM...PS:下次运行Jest,只有DOM结构与上次完全一致测试才会通过,通常会有两种方法来解决这种情况: 找到问题,修复不同; 用新的DOM结构替换旧的。...4.3 测试交互 storybook交互性测试可以使用 Enzyme模拟用户输入,然后使用Mocha or Jest来进行结果测试,storybook又一个专门的插件帮助我们集成他们:specifications...PS:测试不通过时,运行npm run jest:integration将强制更新原有快照。...包管理 使用lerna进行包管理发布。 6. 参考链接 Storybook 4.0 is here!

    3.4K20

    JavaScript测试教程-part 2:引入 Enzyme 并测试 React 组件

    JavaScript测试教程–part 4:模拟 API 调用模拟 React 组件交互 本教程的第一篇中,我们简要介绍了单元测试的基础。这次要更进一步,使用 Enzyme 库测试 React。...我们在这里用了 Jest,不过 Enzyme 也可以与 Mocha Chai 之类的库一起使用Enzyme 基础 Enzyme 是一个库,用于测试处理你的 React 组件。...这里要注意一个非常重要的点:即使我们用了 Enzyme,但测试运行程序仍然是 Jest。由于我们用的是 expect 函数,因此可以使用各种可供调用的匹配器函数。我已经课程的第一部分中提到了它们。...要将其与 Jest 一起使用,请安装 jest-enzyme 包。 1npm install jest-enzyme 最后要做的是将其导入 setupTests 文件中。...在编写单元测试,它工作得很好。本教程的后续部分中,我将介绍其他类型的渲染,并学习如何测试程序的不同部分。它将包括快照测试模拟数据之类的技术。下次见!

    1.4K50

    前端自动化测试

    操作变得十分友好 综合目前市面上的轮子,我们技术选型为Jest+Enzyme 实践 例子是一个基于Antd二次封装的单选年的日期选择器,如下演示: 图片 代码结构如下 图片 其中测试相关的文件,...这里可以首先简单的看一下,Jest+Enzyme的基本语法: Jest的API更多着力于定义测试、断言、mock库 定义测试: describe: 定义一个测试套件(test suite) it: 定义一个测试...(test) beforeEach: 定义一个回调函数每个测试之前执行 expect: 执行一个断言 jest.fn(): 创造一个mock函数 一些用于断言的方法: toEqual: 验证两个是否相同...Enzyme的API更多着重于渲染react组件从dom树种检索指定的节点 下面是三种渲染组件的方法: shallow: 会渲染至虚拟dom,不会返回真实的dom节点,大幅提升测试性能 mount:...即检查输入框的是否为默认 测试清除按钮是否可用,通过模拟点击清除按钮,测试是否能按照预期清除输入框内填充的默认 测试设置,点击输入框,弹出选择框,选择,检查输入框中的是否为选择的

    2K20

    【译】使用EnzymeReact Testing Library测试React Hooks

    本教程中,我们将了解如何通过使用带有hooks的to-do应用程序来实现这一点。我们将介绍使用EnzymeReact Testing Library编写测试,这两个库都能做到这一点。...中输入一个。...find()instance()方法设置输入字段的。...我们使用断言,进一步模拟单击事件之前,输入“修复失败测试”,该事件应该将新的项目添加到待办事项列表中。 最后,断言列表中有三个项,并且第三个项与我们创建的项相等。...根据官方文档,React取决于钩子调用的关联状态相应的useState调用的顺序。这段代码打乱了顺序,因为钩子只有条件为true才会被调用。 这也适用于useEffect其他钩子。

    4.1K30

    「前端架构」Grab的前端学习指南

    Jest可以保存React组件Redux状态生成的输出,并将其保存为序列化文件,这样您就不必自己手动生成预期的输出。Jest还具有内置的模拟、断言和测试覆盖率。一个图书馆来统治他们所有人!...建议用酶测定反应组分。 Jest酶使编写前端测试变得有趣容易。因为定义了明确的职责接口,所以React组件Redux操作/缩减器相对容易测试也很有帮助。...Jestase的文档非常简洁,通过阅读它们应该就足够了。 预计持续时间:2-3天。尝试为你的React + Redux应用程序编写Jest +Enzyme!...Study Links Jest Homepage Testing React Apps with Jest Enzyme Homepage Enzyme: JavaScript Testing utilities...通过npm安装安装的包中也存在不确定性的问题。我们的一些CI构建会失败,因为CI服务器安装依赖项,它会对一些包含中断更改的包进行小的更新

    7.4K20

    React + Redux Testing Library 单元测试

    同一个文件夹中创建一个 math.test.js 文件,在这里我们将使用 Jest 来测试 math.js 中定义的函数: image.png 然后运行 yarn test (添加 NPM Script...而另一种特定行为就是返回特定的数据,即 Stub 也可以根据输入模拟返回一种输出,作为某些模块的替身帮它演戏,比如“小鲜肉们”遇到要跳车啦、要卿卿我我(误)的时候就要找替身,“一二三四五六七八”连台词都不用背还需要配音...从技术上讲,你可以真实的浏览器中运行,但由于不同平台上启动真实浏览器的复杂性,更建议使用 JSDOM 虚拟浏览器环境中运行 Node 中的测试。...MVC Flux 最大的不同就是查询更新的分离。 MVC 中,Model 同时可以被 Controller 更新并且被 View 所查询。...然后我们就可以使用 Jest 模拟一个 action 的行为再传给 store,而 actionClick 这个伪造函数能够让我们去断言该 action 是否被调用过。

    2.4K10

    Unit Testing

    #配置单元测试 #安装 Jest 我们使用 yarn 来安装 Jest 包 yarn add -D jest package.json 文件中加入测试命令 { "scripts": {..."test": "jest" } } 之后只需要在 Command Line 中输入 yarn test 即可开启测试 #配置遇到的麻烦 我配置 Jest 遇到了几个麻烦,让我的测试代码运行起来...运行 Jest 测试代码出现 Cannot use import statement outside a module 不能在其他模块使用 import 语句 出现这个问题的主要原因在于 Webpack...文件夹下的文件代码 无法识别 css scss 等样式文件 我们组件当中大部分都会有 css 或者 scss 等文件,但是 Jest 并无法处理这类文件,此时需要将此类样式文件都 Mock 掉 {...Enzyme 辅助库的话,需要额外配置一下 配置 setupFiles 字段,该字段的含义是初始化运行单元测试,需要执行的文件 { setupFiles: ['/__mocks

    1.3K20

    对 React 组件进行单元测试

    stub 等,以及一些对模块的模拟,对 ajax 返回模拟、对 timer 的模拟,都叫做 mock 。...它模拟了 jQuery 的 API,非常直观并且易于使用学习,提供了一些与众不同的接口几个方法来减少测试的样板代码,方便判断、操纵遍历 React Components 的输出,并且减少了测试代码实现代码之间的耦合...一般使用 Enzyme 中的 mount 或 shallow 方法,将目标组件转化为一个 ReactWrapper对象,并在测试中调用其各种方法: import Enzyme,{ mount } from...所谓的异步操作,不考虑 ajax 整合的集成测试的情况下,一般都是指此类操作,只用 setTimeout 是不行的,需要搭配 done 函数使用: //组件中const Comp = (props)...sinon 中有一些模拟 XMLHttpRequest 请求的方法, jest 也有一些第三方的库解决 fetch 的测试; 我们的项目中,根据实际的用法,自己实现一个类来模拟请求的响应: //FakeFetch.jsimport

    4.3K40
    领券