开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Jest require '@material-ui/icons‘提供未定义

Jest是一个用于JavaScript代码测试的开源框架。它提供了一套简单而强大的API，用于编写测试用例、运行测试并生成测试报告。Jest是由Facebook开发并维护的，它专注于提供快速、可靠和简单的测试体验。

在这个问答内容中，"Jest require '@material-ui/icons'"是一段代码，它尝试引入名为'@material-ui/icons'的模块。'@material-ui/icons'是一个React组件库，提供了一系列常用的图标，用于在React应用中进行图标的展示和操作。

对于这段代码报错"提供未定义"，可能有以下几种情况：

未正确安装'@material-ui/icons'模块：首先需要确保已经使用合适的包管理工具（如npm或yarn）安装了'@material-ui/icons'模块。可以通过运行命令npm install @material-ui/icons或yarn add @material-ui/icons来安装。
引入路径错误：确保在代码中正确指定了'@material-ui/icons'模块的引入路径。可以使用相对路径或绝对路径来引入模块，具体路径根据项目结构而定。
模块版本不兼容：如果使用的Jest版本与'@material-ui/icons'模块的版本不兼容，可能会导致该错误。可以尝试升级或降级Jest或'@material-ui/icons'模块，以解决版本兼容性问题。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储、人工智能等。具体推荐的产品和介绍链接地址可以根据实际需求来确定，以下是一些常用的腾讯云产品：

云服务器（CVM）：提供弹性的虚拟服务器，支持多种操作系统和应用场景。产品介绍链接：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供稳定可靠的云数据库服务，支持高可用、备份恢复、性能优化等功能。产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全可靠的对象存储服务，适用于存储和管理各种类型的数据。产品介绍链接：https://cloud.tencent.com/product/cos
人工智能（AI）：腾讯云提供了丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接：https://cloud.tencent.com/product/ai

请注意，以上链接仅供参考，具体的产品选择应根据实际需求和腾讯云官方文档进行评估和决策。

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

有帮助

没帮助

相关·内容

Webpack 项目打包压缩优化

npm i speed-measure-webpack-plugin -D 使用 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin...前加上thread-loader进行多线程打包 // 耗时的 loader （例如 babel-loader） ], }, ], }, 官方提供了...例如我们要将项目中的react-dom和@material-ui/xxx相关内容分包出去创建 webpack.dll.config,js用来写分包的配置文件 const path = require(...entry:{ common:[ // 想要分包的依赖 'react-dom', '@material-ui/core...', '@material-ui/icons', '@material-ui/lab' ] }, output:{

4075 1

React---antd的按需引入和自定义主题

.... 3.根目录下创建config-overrides.js 1 const { override, fixBabelImports,addLessLoader} = require...DatePicker } from 'antd'; 3 import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons...) 24 } 25 } 4.备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉二、UI库 1. material-ui...(国外) 官网: http://www.material-ui.com/#/ github: https://github.com/callemall/material-ui 2. ant-design

2.4K3 1

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

编写webpack.config.js配置文件 const path = require('path'); module.exports = { entry: "....编写React组件 App.js 代码如下： var React = require('react'); export default class App extends React.Component...^16.6.1" } 为了使用预构建的SVG Material icons，例如在组件演示中找到的那些, 须先安装 @material-ui/icons包： npm install @material-ui.../icons 详细使用参考：https://material-ui.com/getting-started/installation/ 开发一个简单的登陆表单下面我们就来使用Material...image 修改 maven 中央仓库地址国外的 maven中央仓库国内访问起来比较慢，改用阿里云提供的中央仓库镜像。

7.9K3 0

Vue | 使用 SVG sprite loader 来引入 svg

/cli.vuejs.org/zh/guide/webpack.html https://github.com/mozilla-neutrino/webpack-chain const path = require...try {importAll(require.context('.....try {importAll(require.context('.....vue-property-decorator": "9.1.2", "vue-router": "3.5.2", "vuex": "3.6.2" }, "devDependencies": { "@types/jest...cli-plugin-router": "4.5.13", "@vue/cli-plugin-typescript": "4.5.13", "@vue/cli-plugin-unit-jest

3.1K2 0

React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发

简而言之，react-table 是一个非常强大的库，它与常见的表格组件不同，它不负责渲染 HTML 和 CSS，而是提供了一系列的 hooks 让我们可以灵活地构建功能强大的表格组件。...@material-ui/icons模拟 API然后我们生成 200 条订单数据，同时模拟 API 的筛选、排序和分页功能：// mock.jsimport axios from 'axios'import.../icons/FirstPage'import IconButton from '@material-ui/core/IconButton'import KeyboardArrowLeft from '...@material-ui/icons/KeyboardArrowLeft'import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'import...LastPageIcon from '@material-ui/icons/LastPage'import { makeStyles, useTheme } from '@material-ui/core

16K0 0

React 造轮子系列：Icon 组件思路

React.FunctionComponent 及 TypeScript 提供的接口定义。.../icons/wechat.svg' import '....importAll = (requireContext) => requireContext.keys().forEach(requireContext) try { importAll(require.context...image.png 解决办法： yarn add -D @types/jest 在文件开头加一句 import 'jest' 这是因为 describe 和 it 的定于位于 jest 的类型声明文件中...，不信你可以按住 ctrl 并点击 jest 查看。

2.1K2 0

React 造轮子系列：Icon 组件思路

React.FunctionComponent 及 TypeScript 提供的接口定义。.../icons/wechat.svg' import '....let importAll = (requireContext) => requireContext.keys().forEach(requireContext) try { importAll(require.context...image.png 解决办法： yarn add -D @types/jest 在文件开头加一句 import 'jest' 这是因为 describe 和 it 的定于位于 jest 的类型声明文件中...，不信你可以按住 ctrl 并点击 jest 查看。

4.6K7 0

React使用Electron开发桌面端

创建Electron应用程序使用Electron提供的CLI工具，你可以创建一个Electron应用程序。...在组件中，你可以使用React提供的组件和库构建Web界面。...例如，你可以使用Material-UI库来构建一个简单的界面： import React from 'react'; import { makeStyles } from '@material-ui/core...在main.js文件中，使用以下代码： const { app, BrowserWindow } = require('electron'); const path = require('path');...你还需要在preload.js文件中注入React和ReactDOM库： window.React = require('react'); window.ReactDOM = require('react-dom

1301 0

预构建如何玩转秒级依赖预构建的能力？

react:// react 入口文件// 只有 CommonJS 格式if (process.env.NODE_ENV === "production") { module.exports = require.../cjs/react.production.min.js");} else { module.exports = require("....自定义配置详解前面说到了如何启动预构建的问题，现在我们来谈谈怎样通过 Vite 提供的配置项来定制预构建的过程。...在一些比较复杂的项目中，这个过程会执行很多次，如下面的日志信息所示:[vite] new dependencies found: @material-ui/icons/Dehaze, @material-ui...[vite] new dependencies found: @material-ui/core/Dialog, @material-ui/core/DialogActions, updating...

4329 0

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

那么现在就面临一个选择：一是选择 React 生态中已有的组件库，例如 antDesign、Material-UI 等比较成熟的组件库；二是团队再开发一套属于自己的组件库。...有赞前端团队选择了后者，产出并开源了 Zent ，Zent 提供了一整套基础的 UI 组件以及常用的业务组件，目前我们有 45+ 组件，这些组件都已经在有赞的各类 PC 业务中广泛使用。...React 大环境里面有很多优秀的 UI 组件库，国内比较有名的 antDesign，国外的 Material-UI，都是比较稳定和优秀的组件库。那么我们为什么还要自己去开发一套组件库呢？...Button 甚至提供了 a标签的功能，只要在Button上传入 props：href。...组件测试 js 单元测试框架有很多，chai、jest、mocha、karma 等等，Zent 组件库使用的是 jest + enzyme 的组合，下面来看一个例子： // Button UI test

1.6K3 0

【译】Typescript 3.9 常用新特性一览

2、TypeScript 打包编译等速度提升这里主要是优化了几个微软的内部项目的性能优化，比如: Typescript 团队发现以前的 Material-ui 与 Styled-Components...根据 Visual Studio Code 团队提供的建议，我们发现在执行文件重命名时，单是查明哪些导入语句需要更新就要耗去 5 到 10 秒时间。...不少朋友仍在使用 CommonJS 样式的 require(...)...导入，例如： const fs = require("fs"); TypeScript 现在能够自动检测您所使用的导入类型，保证文件样式简洁而统一。...bar).baz 在以上代码中，括号会阻止可选链的“短路”行为；因此如果未定义 foo 为 undefined，则访问 baz 会引发运行时错误。

1.3K2 0

入门 TypeScript 编写 React

使用 create-react-app 开启 TypeScript Create React App 是一个官方支持的创建 React 单页应用程序的CLI，它提供了一个零配置的现代构建设置。...如果在已有的工程中添加，也非常简单： $ npm install --save typescript @types/node @types/react @types/react-dom @types/jest...$ # 或者 $ yarn add typescript @types/node @types/react @types/react-dom @types/jest 从零配置创建 index.html...= require('path') var webpack = require('webpack') const { CheckerPlugin } = require('awesome-typescript-loader...Portals ReactDOM 中提供了一个方法 createPortal，可以将节点渲染在父组件之外，但是你可以依然使用父组件上下文中的属性。

5.2K4 0

用 jest 单元测试改善老旧的 Backbone.js 项目

对于早期的前端 SPA 项目，Backbone.js + Require.js 是一种常见的技术组合，分别提供了基础的 MVC 框架和模块化能力。...其本身可以提供 AMD 规范的 JS 模块，并提供了通过插件加载文本模板等能力。...在实际的项目中，我们采用了 ES6 语法和 ESM 模块规范来编写源文件，并借助 babel 将其转译为 UMD 模块；最后通过 Require.js 提供的优化工具 r.js 来打包，并由 Require.js...mock 数据的 php 服务器环境三是由于视图层没有很好的组件化，从而缺乏对视图组件的测试 jest for Backbone 的实践 jest 是比较新的测试框架，默认零配置，但也提供了灵活的适配方法...path = require('path');export default { import: tmplArrs=>tmplArrs.forEach(tmpl=>{ jest.doMock

3.4K1 0

Vue项目初次访问慢的一种解决思路

preview": "node build/index.js --preview", "lint": "eslint --ext .js,.vue src", "test:unit": "jest...vue-cli-service test:unit", "test:ci": "npm run lint && npm run test:unit", "svgo": "svgo -f src/icons.../svg --config=src/icons/svgo.yml" }, 执行如下命令打包： npm run build:pre 将打包后的dist文件夹上传到服务器上部署（nginx、tomcat...install： npm install vue.config.js关键配置 // 导入compression-webpack-plugin const CompressionWebpackPlugin = require

1.6K3 0

类型即正义：TypeScript 从入门到实践（序章）

提示Ant Design [19]是蚂蚁金服孵化的一套企业级产品设计体系，提供了完备的 TS 类型定义，使得我们可以很方便的在 TS 项目中使用，在最近发布了 4.0 版本，致力于创造高效愉悦的工作体验...最后我们安装一个在 Ant Design 4.0 拆分出去的 icons 包，可以用来按需引用 icons，进一步减少最后的打包体积，继续在命令行运行如下命令： $ npm install @ant-design.../icons 大功告成！.../jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2...", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types

1.5K2 0

Node.js 中的 require 是如何工作的？

Node 遵循 Commonjs 规范，规范的核心是通过 require 来加载依赖的其他模块。我们已经常习惯于使用社区提供的各种库，但对于模块引用的背后原理知之甚少。...的 mock module 效果 jest 是 Facebook 开源的前端测试库，提供了很多非常强大又实用的功能。...举个例子，项目中有个 apis 文件，提供对接后端 api。...jest.mock('./apis.js'); const apis = require('....从实际运行结果上看，Jest 有自己实现的模块加载机制，跟 commonjs 有出入。比如在 jest 中 require module 并不会写入 require.cache。

3.3K1 0

写代码无BUG，网易云前端单元测试方案总结

例如 mocha 就提供了describe 和 it 描述用例结构，提供了 before, after, beforeEach, afterEach 生命周期函数，提供了 describe.only ,...const { expect } = require('chai'); const { multiple } = require('....虽然 Jest 提供了很丰富的功能，但是并没有内置 ES6 支持，所以依然需要根据不同运行时对代码进行转换，由于 Jest 主要运行在 Node 中，所以需要使用 babel-jest 将 ES Module...在真实浏览器环境下测试目前 Jest 不支持直接在真实浏览器中进行测试，其默认的启动器只提供了一个 JSDOM 环境，在浏览器中进行单元测试目前只有 Karma 方案能做到，所以也可以使用 Karma...另外测试 React组件除了 Enzyme 提供的操作， Jest 中还有很多其他有用的特性，比如可以 mock 一个 npm 组件的实现，调整 setTimeout 时钟等，真正进行单元测试时，这些工具也是必不可少的

9.5K2 0

VSCode拓展推荐（前端开发）

htmltagwrap 快捷包裹html标签 htmltagwrap 包裹HTML Import Beautify import分组、排序、格式化 Import Cost 行内显示导入（import/require...快速切换项目 Quokka.js 不需要手动运行，行内显示变量结果 React Native Storybooks storybook预览插件，支持react React Playground 为编辑器提供一个...文件图标拓展 vscode-database 操作数据库，支持mysql和postgres vscode-icons 文件图标，方便定位文件 vscode-random 随机字符串生成器 vscode-spotify...workbench.colorTheme": "Plastic - deprioritised punctuation", "workbench.iconTheme": "vscode-great-icons...eSEL', $SEL)" }, "prettier.tslintIntegration": true, "cSpell.userWords": [ "Unmount" ], "jest.autoEnable

2.2K4 1

万字详文：彻底搞懂 Jest 单元测试框架

我们将提供数字为 1 和 2，并期望输出 3。 test 它需要两个参数：一个用于描述测试块的字符串，以及一个用于包装实际测试的回调函数。...js 单测，会默认设置 require.resolve('jest-runner') 为运行单测的 runner，还会配合 chalk 库生成 outputStream 输出内容到控制台。...这里顺便提一下引入 jest 引入模块的原理思路，这里先会 require.resolve(moduleName) 找到模块的路径，并把路径存到配置里面，然后使用工具库 packages/jest-util.../transform 提供的 createScriptTransformer 方法来处理引入的模块。...中能得到这些作用域的方法，本质上就是为 vm 的运行环境提供的作用域，为后续注入 global 提供便利，涉及到改写的 global 方法有如下： global.global global.clearInterval

7.5K2 0

2022年3月最新Eslint + Prettier + Husky + Stylelint + Jest + CICD 超详细前端单元测试&规范工程化工作流

我这里使用的则是Jest和ReactTestingLibrary 3.1 Jest && ReactTestingLibrary 3.1.1 初始化与安装项目中使用了ts，需要为Jest额外准备babel...@types/jest -D 接着生成基本配置文件进行初始化 npx ts-jest config:init // ts版本 npx jest --init // js版本 npm set-script...(css|sass|scss)$", ], }; 当然如果使用Next框架，这样写就行： const nextJest = require('next/jest') const createJestConfig...注册完毕后可以拿到云开发的环境ID，记下来接着我们需要开通「新建云开发环境」-「静态页面托管」同时全局安装腾讯云提供的cli，并登陆 npm i @cloudbase/cli -g --force...require(".

1.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭