开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Material-UI的withStyles在使用Jest +酶测试有状态类组件时导致问题

问题描述： Material-UI的withStyles在使用Jest +酶测试有状态类组件时导致问题。

解答： Material-UI是一个流行的React UI组件库，提供了丰富的UI组件和样式。withStyles是Material-UI提供的一个高阶组件，用于将样式应用到组件上。

在使用Jest和酶进行测试时，如果测试有状态类组件，并且该组件使用了withStyles进行样式的应用，可能会导致一些问题。这是因为withStyles使用了JSS（CSS in JS）的方式来处理样式，而Jest默认不支持处理CSS文件。

解决这个问题的方法有两种：

使用jest-css-modules或jest-transform-css这样的插件来处理CSS文件。这些插件可以将CSS文件转换为Jest可以处理的格式，从而解决withStyles在测试中的问题。
在测试中模拟withStyles的行为。可以通过手动创建一个mockStyles函数来模拟withStyles的功能，并将其应用到组件上。这样可以绕过withStyles的样式处理，使测试可以正常进行。

综上所述，解决Material-UI的withStyles在使用Jest +酶测试有状态类组件时导致的问题，可以使用插件来处理CSS文件或者手动模拟withStyles的行为。具体选择哪种方法取决于项目的需求和开发团队的偏好。

推荐的腾讯云相关产品：腾讯云提供了丰富的云计算产品和服务，可以满足各种应用场景的需求。以下是一些与云计算相关的腾讯云产品：

云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建、部署和管理虚拟服务器。
云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，适用于各种应用场景。
云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种类型的数据。
人工智能（AI）：腾讯云提供了多个人工智能相关的产品和服务，包括图像识别、语音识别、自然语言处理等。
物联网（IoT）：腾讯云物联网平台提供了全面的物联网解决方案，包括设备接入、数据管理、应用开发等。
区块链（BCS）：腾讯云区块链服务提供了一站式的区块链解决方案，可用于构建可信、高效的区块链应用。

以上是一些腾讯云的云计算产品，可以根据具体需求选择适合的产品进行使用。更多产品和详细介绍可以参考腾讯云官方网站：https://cloud.tencent.com/

相关搜索:Material-使用酶+ Jest进行测试时，UI withStyles组件不会呈现 set.contains :在hashable协议中使用类的Swift会导致Swift方法中的随机行为。代码有什么问题？仅使用Jest测试有状态的react组件(不使用React测试库或酶)使用Angular Universal时，在组件的ngOnInit中发出http请求有什么问题吗？使用来自另一个类的有状态小部件的实例访问有状态小部件的变量时，在null上调用getter length 在try/catch中使用async/await方法的Jest/酶测试反应组件在使用jest测试方法时，类组件中没有更新状态在使用状态的react js中的按钮单击时切换类，而不重新呈现组件在使用酶和jest时如何在测试中设置状态？在尝试测试使用_axios.default.create进行axios调用的组件时，获取“Jest is not a function”。

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

用户登录前后端分离开发实战案例：React，npm，webpack，ES6, Kotlin, Spring Boot, Gradle, Freemarker, Material UIKotlin 开发

当然，在实际的项目开发中，已经有大神们开发好了脚手架，例如 create-react-app（https://github.com/facebook/create-react-app），我们直接使用脚手架就可以了...devDependencies和dependencies的区别我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如： --save-dev...^16.6.1" } 为了使用预构建的SVG Material icons，例如在组件演示中找到的那些, 须先安装 @material-ui/icons包： npm install @material-ui...import Button from '@material-ui/core/Button'; 使用 prop-types 我们使用 prop-types 第三方库对组件的props中的变量进行类型检测...当然，在实际的项目开发中，我们有一系列的自动化脚手架、构建工具插件等，我们会在其他章节中逐步介绍。

8K3 0

漫谈 React 组件库开发（二）：组件库最佳实践

，我们定义了很多标记状态的 props，比如 type 表示 Button 的视觉风格，size 表示尺寸，disabled 禁用，loading 状态等，这些状态在组件内部都不会维护 state，所有的状态由传入的...组件测试 js 单元测试框架有很多，chai、jest、mocha、karma 等等，Zent 组件库使用的是 jest + enzyme 的组合，下面来看一个例子： // Button UI test...jest 做 UI 测试有局限性，只能测试基本的 dom 结构和样式，一些逻辑交互无法测到，只能覆盖大部分的情况。...组件发包组件发包只有拥有发包权限的人才能操作，Zent 是以组件库为单位发包的， yarn build 会将整个 Zent 的代码打包，使用命令 yarn publish 发包，在发包之前会跑组件测试...三、小结在本文中，我们从组件的设计思路、编码规范、开发流程、测试、日常维护这五个方面阐述了如何构建一个 React 组件库，并且以 Zent 为例讲述了有赞是如何做的，任何一个组件库都需要的经过这个生命周期

1.6K3 0

前端框架选择指南：React vs Vue vs Angular

选择前端框架时，React、Vue 和 Angular 都是流行的选择，各有优缺点。我们可以从各个维度进行比较和选择：React核心理念：组件化开发，专注于视图层。...学习曲线：相对平缓，因为重点在于JSX和组件逻辑。生态系统：极为丰富，有大量的第三方库和工具。性能：使用虚拟DOM，优化性能。模板语法：使用JSX，更接近JavaScript语法。...生态系统：快速增长，拥有广泛的支持。性能：使用虚拟DOM和优化策略。模板语法：有自己的模板系统，易于阅读。状态管理：内置Vuex，提供完整状态管理。...Vue: 也强调组件化，但更注重开箱即用的完整解决方案，易于维护。Angular: 严格的架构和模块化，适合大型项目，但过度复杂可能导致学习成本增加。...测试React: 使用Jest、Enzyme等工具进行单元测试和集成测试。Vue: 提供vue-test-utils，可以与Jest、Mocha等测试框架配合使用。

1260 0

对 React 组件进行单元测试

分离出的子组件往往也更容易写成stateless的无状态组件，使得性能和关注点更加优化。...明确指定 PropTypes 对于一些之前定义并不清晰的组件，可以统一引入 prop-types，明确组件可接收的props；一方面可以在开发/编译过程中随时发现错误，另外也可以在团队中其他成员引用组件时形成一个明晰的列表...; }); ... }); 调用组件的“私有”方法对于一些组件中，如果希望在测试阶段调用到其一些内部方法，又不想对原组件改动过大的，可以用instance()取得组件类实例...react-bootstrap/modal 在一个项目中用到了 react-bootstrap 界面库，测试一个组件时，由于包含了其 Modal 模态弹窗，而弹窗组件是默认渲染到 document 中的...sinon 中有一些模拟 XMLHttpRequest 请求的方法, jest 也有一些第三方的库解决 fetch 的测试; 在我们的项目中，根据实际的用法，自己实现一个类来模拟请求的响应： //FakeFetch.jsimport

4.3K4 0

单元测试

接下来的问题就是：我们代码中的哪部分是这两类用户会看到、用到和知道的呢？...交互），推荐单测之前已评审过测试用例公共类公共组件公共方法公共自定义hook 需求功能类组件的Props（组件的入参是否在正确的场景或时机被正确的使用或调用） Render 交互（基于用户的交互判断关键节点的流程是否在正确的时机被正确执行...，会出现报错这种情况通常是由于在一组测试用例中，前一个测试用例没有正确地清理或重置测试环境，导致后续的测试无法找到期望的元素或状态。...这样可以确保每个测试用例都在相同的初始状态下运行，并且没有残留的状态或影响。在每个测试用例之后使用 afterEach 函数或 afterAll 函数来清理测试环境。...act 的使用场景如下：当你在测试中进行与 React 组件的交互（例如模拟用户点击、输入等）时，可以使用 act 来确保组件在更新后进行正确的断言。

2301 0

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

在React中进行测试很容易，因为组件的接口定义良好，可以通过向组件提供不同的道具和状态并比较呈现的输出来测试组件。可维护性——以基于组件的方式编写视图可以促进可重用性。...Jest可以保存React组件和Redux状态生成的输出，并将其保存为序列化文件，这样您就不必自己手动生成预期的输出。Jest还具有内置的模拟、断言和测试覆盖率。一个图书馆来统治他们所有人!...React附带了一些测试工具，但是通过类似于jquery的API，通过Airbnb提供的酶可以更容易地生成、断言、操作和遍历React组件的输出。建议用酶测定反应组分。...Jest和酶使编写前端测试变得有趣和容易。因为定义了明确的职责和接口，所以React组件和Redux操作/缩减器相对容易测试也很有帮助。...对于React组件，我们可以测试给定一些道具，呈现所需的DOM，并在某些模拟用户交互时触发回调。对于Redux还原器，我们可以测试给定的一个先验状态和一个动作，会产生一个结果状态。

7.4K2 0

前端框架与库 - Material-UI组件库

本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。 1....2.2 忽视自定义样式虽然 Material-UI 提供了丰富的预设样式，但在某些场景下，可能需要对组件进行更精细的样式控制。直接修改全局样式可能会导致意料之外的影响。...3.3 关注无障碍性使用 Material-UI 时，确保每个组件都具有适当的 ARIA 属性，如 aria-label，并遵循无障碍设计原则。 4....然后，我们定义了一个样式规则，其中包含一个根类和子元素的选择器。最后，我们在 return 语句中渲染了两个按钮，一个使用 contained 变体，另一个使用 outlined 变体。...通过以上介绍和示例，我们可以看到 Material-UI 在简化前端开发流程的同时，也带来了一些需要注意的问题。

1451 0

前端框架与库 - Material-UI组件库

本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。1....2.2 忽视自定义样式虽然 Material-UI 提供了丰富的预设样式，但在某些场景下，可能需要对组件进行更精细的样式控制。直接修改全局样式可能会导致意料之外的影响。...3.3 关注无障碍性使用 Material-UI 时，确保每个组件都具有适当的 ARIA 属性，如 aria-label，并遵循无障碍设计原则。4....然后，我们定义了一个样式规则，其中包含一个根类和子元素的选择器。最后，我们在 return 语句中渲染了两个按钮，一个使用 contained 变体，另一个使用 outlined 变体。...通过以上介绍和示例，我们可以看到 Material-UI 在简化前端开发流程的同时，也带来了一些需要注意的问题。

800 0

初尝 Jest 单元测试

最近的几次发布都犯了小错，都是缺乏或者忽视了测试所导致的。通常来说，一个新功能上线的时候，开发和测试都投入比较多，各项测试都是比较全面的。然而，发布上线也并非意味着不再有bug或者修改。...)和测试框架(Jest)，所以，看怎么样在已有项目快速补充上单元测试吧。...通常涉及UI的自动化测试，思路是把某一时刻的标准状态拍个快照，在测试回归的时候进行pixel to pixel的对比。...理想状态中，组件若是无内部状态变化，测试用例覆盖率应该可以达到100%了。当然，仅仅是理想。...看起来，这样子添加测试用例，倒也不是很麻烦的样子，主要是snapshots的使用，有四两拨千斤效，不过重点在于其输入数据的构造。可期。

1.8K8 0

实战 | 初尝 Jest 单元测试

)和测试框架(Jest)，所以，看怎么样在已有项目快速补充上单元测试吧。...通常涉及UI的自动化测试，思路是把某一时刻的标准状态拍个快照，在测试回归的时候进行pixel to pixel的对比。...理想状态中，组件若是无内部状态变化，测试用例覆盖率应该可以达到100%了。当然，仅仅是理想。...，或者通过--config 参数指定配置文件：在仅仅使用toMatchSnapshot()的情况下，分支测试覆盖率达到80%以上了，而有一些代码还没有覆盖到，其实是因为组件内部有交互行为，比如说onClick...看起来，这样子添加测试用例，倒也不是很麻烦的样子，主要是snapshots的使用，有四两拨千斤效，不过重点在于其输入数据的构造。扫码下方二维码，随时关注更多前端干货文章！

9031 0

初尝 Jest 单元测试

最近的几次发布都犯了小错，都是缺乏或者忽视了测试所导致的。通常来说，一个新功能上线的时候，开发和测试都投入比较多，各项测试都是比较全面的。然而，发布上线也并非意味着不再有bug或者修改。...)和测试框架(Jest)，所以，看怎么样在已有项目快速补充上单元测试吧。...通常涉及UI的自动化测试，思路是把某一时刻的标准状态拍个快照，在测试回归的时候进行pixel to pixel的对比。...理想状态中，组件若是无内部状态变化，测试用例覆盖率应该可以达到100%了。当然，仅仅是理想。...看起来，这样子添加测试用例，倒也不是很麻烦的样子，主要是snapshots的使用，有四两拨千斤效，不过重点在于其输入数据的构造。可期。

1.6K1 0

Jest单元测试之旅—实践总结

前言：之前对于单元测试仅仅处于了解的状态，并且在实际开发中并没有用到。...而针对与我们前端来说，我认为单测就是：UI测试和逻辑测试，逻辑测试包含：工具类/函数、业务相关代码测试。UI测试分为：公共组件和业务组件测试。为什么要写单元测试？...这是因为Jest默认的超时时间为5秒，但是我们在进行测试时不会真的等那么久，这时候Jest就提供了一系列工具方法解决该问题。...导致该错误的原因是因为我们在使用runOnlyPendingTimers时，把定时器执行到了setTimeout内部，但是内部的执行代码是Promise.then，它是一个微任务，微任务会被推到事件队列中...第一：在有些情况下我们没办法在测试环境中使用一些API或全局的方法，此时Jest提供的Mock方法是解决问题该重要手段。

10.3K2 0

前端趋势榜：上周最热门的 10 大前端开源项目 - 210327

虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。...为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。...组件化创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。...Material-UI 是一个简单且可自定义的组件库，用于构建更快，更美观，更易于访问的 React 应用程序。遵循您自己的设计系统，或从材料设计开始。...Cypress 简化了设置测试、编写测试、运行测试和调试测试，支持端到端测试、集成测试和单元测试，支持测试在浏览器中运行的任意内容。支持 Mac OS、Linux 和 Windows 平台。

1.5K2 0

Sentry 开发者贡献指南 - 测试技巧

sentry.testutils.factories 中的工厂方法可用于我们所有的测试套件类。使用这些方法来建立所需的组织、项目和其他基于 postgres 的状态。...我们在 Sentry 使用验收测试有两个目的：涵盖仅通过端点测试或仅使用 Jest 无法涵盖的工作流程。通过我们的视觉回归 GitHub Actions 为视觉回归测试准备快照。...虽然我们对视觉回归有相当广泛的覆盖，但仍有一些重要的盲点：悬停(Hover)卡片与悬停状态模态窗口图表和数据可视化所有这些组件和交互通常不包含在可视化快照中，您在处理其中任何一个时都应该小心。...Jest 测试我们的 Jest 套件涵盖为前端组件提供功能和单元测试。我们更喜欢编写与组件交互并观察结果（导航、API 调用）的功能测试，而不是检查 prop 传递和 state 突变。...您还应该使用 MockApiClient.addMockResponse() 来设置您的组件将进行的 API 调用的响应。未能模拟端点将导致测试失败。

1.7K5 0

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

Jest Snapshot Test的特点： Jest 使用一个 test renderer 来生成出 React tree 的序列化结构树。...可以想象成每次UI有变化时会重新生成这个组件并刷新， React会帮开发者处理具体怎么高效的变化。因此我们在测试组件的时候，也只要把重点放在测试我们如何描述这个组件。...当一个组件的 prop 和 state 确定时，我们用 snapshot 保证在这个状态下组件的序列化结构是符合预期的，而不需要考虑状态转变时发生的动态变化。...或者把 WWW API, Action Handler 和 reducer 集成起来，保证 server 的数据和 client 是可兼容的，防止mock的数据和 server 返回数据不一致导致的问题...有少量的集成性测试和更少量的E2E全面测试。在 server 端有 server 的单元测试。在 Code quality 有 eslint， python和Flow type。

3.2K2 1

web前端好帮手 - Jest单元测试工具

钩子和作用域测试时难免有些重复的逻辑，比如我们测试读写文件时需要准备个临时文件，或者比如下面我们使用afterEach钩子，在每个测试完成后重置全局变量： global.platform = {};function...所以推荐大家用.toMatchSnapshot([快照名称])给快照设置命名，在差异对比就能一眼看出是哪句测试代码出问题了，也不会有维护的问题。 React组件如何覆盖测试？...注意，如果redux状态组件测试时，要先初始化store和触发redux的事件后，再渲染React组件： test("init", () => { let store = initStore(combineReducers...，也不会再次进行渲染，所以我们一开始要先处理store状态，再渲染React组件。...首先，由于Jest启动多个进程，并发地跑测试，我们使用node-inspect的方式去跑断点调试时，chrome://inspect页面上断点不会被中断，导致我们无法断点调试。

4.9K4 0

用于浏览器中视频渲染的时间管理 API

因此，会有一些从核心播放状态的派生状态，比如字幕和时间码；也有一些基于状态更改的命令式调用，比如视频元素；在项目持续时间的情况下，有同步状态，比如添加元素时，需要一个主要更新函数，但还需要一个函数来以一种命令式的...这在简单情况下是可行的，但是当进行粘贴剪辑这样的动作时，虽然这个动作也改变了场景的持续时间，但是在实现上，该方案并没有重新计算这一过程，因此并不会更新场景的持续时间，导致状态不一致的问题。...由于 API 的设置问题，任何使用此链接的组件都会接受当前时间值。但是当前时间值每帧都会更改，这样导致几乎画布上的所有组件每一帧都会被重新渲染。...在 React 中，重新渲染很慢，必须重新运行整个渲染函数，而不仅仅是依赖于时间的一小部分 UI，还会导致组件中的子组件也需要重新渲染。...为了解决这一问题，需要用设置的超时替换 requestAnimationFrame 并使用 Jest 的 useFakeTimers 功能，在 Jest 的超时中关闭实时。

2.3K1 0

React + Redux Testing Library 单元测试

如果你希望单元测试所测试的 Order 模块是独立的，那么你就不想直接使用真正的 Product 或 Customer Class，因为 Customer Class 的错误会直接导致 Order Class.../Mock/Spy 这些概念或许会有所混淆，而这跟 JavaScript 语言本身的特点有一定关系，但是我觉得 Jest 通过统一的 fn() 方法把问题解决得还比较恰当，让我们来一块儿看看实例?...，也是各大框架都支持的一种写法， done() 作为异步代码结束的结束标志，从而让测试框架“知道”在结束时进行断言。...前端 UI 组件测试的最佳实践，使得我们可以使用它来更有效地测试组件。...，其实我们在测试 React 组件（单元）的时候不需要关心 Redux store 长什么样子，我们只需要知道 Redux store 当中的这些 action 将会在适当的时机触发，以及它们触发时的预期行为是什么

2.3K1 0

前端单元测试那些事

目前除了 Facebook 外，Twitter、Airbnb 也在使用 Jest。Jest 除了基本的断言和 Mock 功能外，还有快照测试、实时监控模式、覆盖度报告等实用功能。...我在项目开发使用jest作为单元测试框架，结合vue官方的测试工具vue-util-test 3.1 Jest 安装 npm install --save-dev jest npm install -g...对象执行了回调函数注：有时候会存在一种情况，在同个组件中调用同个方法，只是返回值不同，我们可能要对它进行多次不同的mock，这时候需要在beforeEach使用restoreAllMocks方法重置状态...踩坑点 1.触发事件 - 假设组件库使用的是iview中对提供的@change事件，但是当我们进行 wrapper.trigger('change')时，是触发不了的。...渲染问题 - 组件库提供的组件渲染后的html，需要通过wrapper.html()来看，可能会与你从控制台看到的html有所区别，为避免测试结果出错，还应console.log一下wrapper.html

4.3K4 0

你需要了解的前端测试“金字塔”

但是我们的组件规格会如下所示：当 displayModal 为 true 时，Modal 有类是活跃的当 displayModal 为 false 时，Modal 没有类是活跃的当成功按钮被点击时...快照测试快照测试是测试你的渲染组件的图片，并将其与组件的以前的图片进行比较。用 JavaScript 编写快照测试的最好方法是使用 Jest 。...每次运行单元测试时，都会重新生成一个快照，并将其与之前的快照进行比较。如果代码改变，Jest 会抛出一个错误，并警告标记已经改变。然后开发者可以手动检查没有类被误删的情况。...在我们的应用程序中，我们有一个用户（操作）旅程。当用户点击按钮时，模式将打开，当他们点击模式中的按钮时，模式将关闭。我们可以编写一个贯穿这一旅程的端到端测试。...如果你遵循前端测试金字塔，你就可以使用杀手级测试套件创建可维护的 Web 应用程序。你可以在GitHub上看到应用程序的快照测试、单元测试和端到端测试的示例源码库。觉得本文对你有帮助？

1.6K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭