开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Vue-test-utils + CSS modules: wrapper.classes()返回空数组

Vue-test-utils是Vue.js官方提供的一个用于测试Vue组件的工具库，而CSS modules是一种用于解决CSS命名冲突的技术。在使用Vue-test-utils进行组件测试时，可以结合CSS modules来获取组件的CSS类名。

对于给定的代码wrapper.classes()返回空数组的情况，可能有以下几种可能的原因：

组件没有应用CSS modules：CSS modules需要在组件的样式文件中进行配置和使用，如果组件没有使用CSS modules，那么wrapper.classes()将返回空数组。
组件的CSS类名没有被正确解析：CSS modules会将CSS类名进行编译和转换，以避免命名冲突。如果组件的CSS类名没有被正确解析，那么wrapper.classes()可能无法获取到正确的类名，从而返回空数组。

为了解决这个问题，可以尝试以下几个步骤：

确保组件的样式文件使用了CSS modules的配置和语法。可以参考Vue官方文档中关于CSS modules的介绍和用法。
检查组件的模板文件中是否正确应用了CSS类名。确保在模板中使用了正确的类名，以及是否正确绑定了CSS类名。
检查测试代码中是否正确获取了组件的包装器(wrapper)。确保使用了正确的选择器或组件名称来获取包装器。
如果以上步骤都没有解决问题，可以尝试在测试代码中输出一些调试信息，例如打印组件的包装器(wrapper)对象，以便进一步排查问题。

对于Vue-test-utils和CSS modules的更详细的介绍和用法，可以参考腾讯云的相关文档和教程：

Vue-test-utils：https://cloud.tencent.com/document/product/1478/56634
CSS modules：https://cloud.tencent.com/document/product/1478/56635

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

有帮助

没帮助

相关·内容

Vue3组件库工程化实战 --Element3

JS模块 CMD AMD CommonJS 及 ES6 Module CSS模块 Sass Less Stylus 资源模块化文件、CSS、图片通过JS进行统一依赖关联组件化相对于文件的拆分，...组件是对于UI层面的拆分，每一个组件需要包括对应的CSS、图片、JS逻辑、视图模板等并且能完成一个独立的功能。...样式编译后 ├── node_modules ├── packages # 组件代码 ├── rollup-plugin-vue ├── scripts # 脚本发布、提交信息检查...prettier': 'error' } } # .eslintignore src/utils/popper.js src/utils/date.js examples/play *.sh node_modules...rollup是一款小巧的javascript模块打包工具，更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码，基于ES6 modules,它可以让你的 bundle 最小化，有效减少文件请求大小

1.3K2 0

Vue-Test-Utils + Jest 单元测试入门与实践

Vue-Test-Utils + Jest 单元测试入门与实践创建Vue项目在终端用vue-cli创建一个项目 $vue create vue-test 选择Manually select features...(x)"], transformIgnorePatterns: ["/node_modules/"], moduleFileExtensions: [ 'js'...'^.+\\.js$': '/node_modules/babel-jest' }, moduleNameMapper: { '^@/(.*)$': '....to-do-text 是一个 CSS 选择器；Vue-Test-Utils 提供了 find 方法来通过查找选择器，来返回一个 Wrapper；选择器可以是 CSS 选择器、可以是 Vue 组件也可以是一个对象...可以这样写：wrapper.trigger('click', {name: "bubuzou.com"}) 更多用法vue-test-utils官方文档参考原文

2.6K1 0

瑜亮之争：Vue与React的差异

在 React 中，由一个数组生成 HTML 列表的 JSX 代码大概看起来会是这样的： ? 在 Vue 中，实现同样功能的模板代码如下所示： ?...CSS Modules React 和 Vue 中最后一个主要差异点是在 Vue 中编写 CSS 的方式。React 中没有提供相应的内建功能，所以通常会使用 CSS modules。...在 React 中，会像这样使用 CSS modules ： ? Vue 也支持 CSS modules，而且无须配置任何额外插件和构建工具。大概看起来会是这样的（如果使用单文件组件）： ?...虽然 Facebook 已经交由社区去开发那些不属于 React本身的库，但 Vue、vue-router、vuex、vue-test-utils、vue-cli 以及未来更多的官方库的开发和维护团队却是相同的...Vue 拥有一个非常类似的库 vue-test-utils。与 Enzyme 一样，它也提供加载组件、遍历DOM 等功能，从而使测试组件变得更加容易。

1.3K2 0

你不知道的 Vue 单元测试（6000字实战单元测试）

介绍 Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库，它提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用中的单元测试。...主流的单元测试运行器有很多，比如 Jest、Mocha 和 Karma 等，这几个在 Vue-Test-Utils 文档里都有对应的教程，这里我们只介绍 Vue-Test-Utils + Jest 结合的示例...for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS...).toEqual([]) }) 待完成和已完成列表，居然是列表，所以存放数据的字段必须是 Array 类型，空列表就是空数组。....to-do-text 是一个 CSS 选择器；Vue-Test-Utils 提供了 find 方法来通过查找选择器，来返回一个 Wrapper；选择器可以是 CSS 选择器、可以是 Vue 组件也可以是一个对象

11.4K4 1

【架构师（第二十八篇）】测试工具 Vue-Test-Utils 基础语法

---- Vue-Test-Utils 简介提供特定的方法，在隔离的环境下，进行组件的挂载，以及一系列的测试安装这是一个基于 vue-cli 生成的项目，可以直接使用 vue add xxx 进行插件的安装...vue add unit-jest 插件运作的过程安装的依赖 vue-test-utils vue-jest 注入了新的命令 vue-cli-service test:unit tests/unit...props: { msg }, }); console.log(wrapper.findAll('h1')); }); }); findAll 返回元素的 DOMWrapper 数组...，如果没有，返回空数组。...，如果没有，返回空数组。

7782 0

也来扯扯 Vue 单元测试

用成熟好用的测试工具库 -- vue-test-utils vue-test-utils 是 Vue 生态圈中的一个开源项目，其前身是 avoriaz，avoriaz 也是一个不错的包，但其 README...中有说明，当 vue-test-utils 正式发布的时候，它将会被废弃。...vue-test-utils 能极大地简化 Vue.js 单元测试。.../node_modules/.bin/codecov 最后在 README 里加入微标图片就可以了,就像这样。 ?...代码中直接 import 实际的 css 文件，则有可能报错，这时则需要使用 mock 来模拟 css 文件。

1.8K3 0

揭开 HMR 面纱，了解它在 node 端的实现

/style.css' import { sayName } from '....热更上下文 const hmrContext: HmrContext = { // 文件 file, // 时间戳 timestamp, // 受更改文件影响的模块数组...modules: mods ?...之所以这样做，是因为在某些系统上，文件更改的回调函数可能会在编辑器完成文件更新之前过快地触发 // 并 fs.readFile 直接会返回空内容。...接下来是对 css 的处理，对于模块引用者有 css 的全部递归加入到 boundaries。

6491 0

正确的Webpack配置姿势，快速启动各式框架！

/path/to/my/entry/file.js'}; 同时，entry还可以是个数组，这个时候「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。...(ts)$/,use: ["babel-loader", "ts-loader"],exclude: /node_modules/} 其他loader css相关loader css-loader:...处理css文件中的url() style-loader: 将css插入到页面的style标签 less-loader: less转换为css postcss-loader(autoprefixer-loader...): 自动添加兼容前缀(-webkit-、-moz-等) url-loader/file-loader: 修改文件名，放在输出目录下，并返其对应的url url-loader在当文件大小小于限制值时，它可以返回一个...== 'string') {return false;}return userRequest.indexOf('node_modules') >= 0; // 是否位于node_modules里} 3

1.5K3 0

react项目打包优化

这样写可以，但是有一个问题，就是上面的所有引入也会直接打包在 bundle.js 里面，导致整个js与CSS特别的大。...Component }) }) } } //组件将被卸载 componentWillUnmount() { //重写组件的setState方法，直接返回空...这个这样做的好处就是可以吧异步加载的这些组件的js以及CSS单独的打包出来，这样就不用一次加载过大的js文件了。...在 webpack 4 中，提取代码不在放在 plugin 数组下面，而是单独成为了一个属性（与plugin同级了）。...priority: 10 } } } cacheGroups 下面添加你要提取的代码的属性，vender 一般提取的就是 node_modules 目录中的js代码，而且node_modules

3.7K3 0

第87天：HTML5中新选择器querySelector的使用

一、HTML5新选择器 1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null; 支持： Chrome...FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+ 2、document.querySelectorAll("selector"); selector:根据CSS...选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组; 支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+ 3、document.getElementsByClassName...("selector"); selector:根据类选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组; 支持： Chrome 4.0+, FireFox 3.0+, Safari 3.2+,...$('.item');//返回一个jQuery对象（dom元素的数组）本质上jQuery方式和querySelector方式都是获取DOM数组，只不过jquery会多一些其他成员 DOM数组的每一个成员注册事件不能像

9563 0

【架构师（第二十一篇）】编辑器开发之需求分析和架构设计

编码单元测试打包生成通用的 JS 模块发布至 NPM CI/CD 自动发布原则业务组件库大多数都是展示型组件，其实就是把对应的 template 加上属性展示出来，大部分都是 css 属性，会有少量行为...编辑器数据结构整个编辑器使用一个 EditorStore 来实现具体功能编辑器组件渲染根据上述的数据结构，可以很容易的联想到只需要遍历 components 这个数组进行组件渲染即可。...组件的添加和删除也是对应的操作 components 这个数组即可。...技术选型方案语言和基础框架 ts + vue3 脚手架 imooc-cli 测试框架 jest + vue-test-utils 构建工具 webpack + rollup 持续集成 travis UI

1.2K3 0

做个开源博客学习Vite2 + Vue3 （二）设置别名、代理和ESLint

pathResolve("src/components") } }, base: "vue3-blog", // 便于发布到gitee // 打包配置 build: { target: 'modules...也很简单 base: "vue3-blog" 这样就可以，这样发布打包的时候就可以正确设置js、css等的引用路径。反向代理这个主要是处理ajax（axios）的跨域访问的。...测试运行运行vue的项目，向后端申请数据，这时候会先提交到vite2启动的web服务，然后判断后再转给node建立的web服务，处理之后返给node建立的web服务，最后返给浏览器。...选择类型模块，选择 JavaScript modules： ? 当然选 vue.js 了 ? 要不要用TS？目前不会，先不用了。 ? 代码在哪里运行？注意这是多选，那就都选好了。 ?

1.3K3 0

Vue 3 新特性：在 Composition API 中使用 CSS Modules

首先来看看什么是 CSS Modules： CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统。...vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS 的替代方案。...启用 CSS Modules 如果是使用 vue cli 创建的项目，应该已经默认开启了这一特性；如果项目中需要手动开启，按如下设置： // webpack.config.js { module:...loader: 'css-loader', options: { // 开启 CSS Modules modules: true... 因为这是一个计算属性，所以也支持 :class 的对象/数组语法： <p :class="{ [$style.red

2.7K2 0

webpack实战——预处理器(loader)【上篇】

rules模块是一个数组，代表了要对模块进行处理的规则。...在此处，我们使用到的规则有test和use： test：接收一个正则表达式或者一个元素为正则表达式的数组，只有正则匹配上的模块才会使用本条规则； use：接收一个数组，代表该规则所使用的loader。...可以看到，我们将style-loader写在了use的数组中，并且细心的朋友可能发现写在了css-loader之前，这就是链式loader。...，也就是说node_modules中的模块不会执行该规则。...: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules

9922 0

实现小型打包工具

以下代码实现了两个功能：将ES6转为ES5 支持在js中通过import引用CSS文件实现 ---- 因为涉及ES6转ES5所以需要引用babel相关工具 yarn add babylon babel-traverse...dependencies, code } } // 接下来我们实现一个函数，有如下功能： // 调用 readCode 函数，传入入口文件 // 分析入口文件的依赖 // 识别 JS 和 CSS...relativePath=>{ // 获取绝对路径 const absolutePath = path.join(dirname, relativePath); // CSS...，该数组的目的是存储代买中涉及到的所有文件 // 然后遍历这个数组，开始这个数组中只有入口文件，遍历过程中，如果入口文件依赖其他文件就会被push到数组中 // 现在我们已经获取了所有的依赖，接下来实现打包功能...let moudles = '' dependencies.forEach(dep =>{ const filePath = dep.relativePath || entry; modules

5132 0

从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目

预编译器 Stylus/Sass/Less 本项目使用 CSS 预编译器 Stylus，直接安装为开发依赖即可。...image我们这里选择 JavaScript modules (import/export) Does your project use TypeScript?.../node_modules/cz-conventional-changelog" } } ?...安装核心依赖我们使用 Vue 官方提供的 vue-test-utils 和社区流行的测试工具 jest 来进行 Vue 组件的单元测试。...vue-test-utils[42] The next iteration of Vue Test Utils.

6.3K6 2

5. 「vue@2.6.11 源码分析」组件渲染之创建虚拟DOM

last, after all // built-in modules have been applied. const modules = platformModules.concat(baseModules...: number): VNode | Array { //... vnode data 不能是响应式数据，如果是返回空vnode // object syntax in v-bind...如果没有tag，返回空vnode //......createComponent(tag, data, context, children) } ， if (Array.isArray(vnode)) { // 如果vnode是数组...if (isDef(data)) registerDeepBindings(data) return vnode } else { // 如果没有返回空vnode } } //

9702 0

PostCss学习笔记，持续记录

2.编译时编译时的方案有两种，一种是 scoped，一种是 css modules（还有Css in Js）。...css-modules 是 css-loader 支持的方案，在 vue、react 中都可以用，它是通过编译的方式修改选择器名字为全局唯一的方式来实现 css 的样式隔离。...css-modules 的方案是修改 class、id 等选择器的名字，那组件里就要通过 styles.xx 的方式引用这些编译后的名字，开发者是能感受到的。...实现转换的工具 PostCSS拥有非常强大的插件，典型的比如autoprefixer、cssnext、css modules等。...*/ exclude: undefined,//正则字符或者数组，忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 include: undefined,/正则或者数组

6081 0

js选择对象

js是基础语言，语言道路上无捷径可走，基础牢些，才能走得远些 1、class css: .xxx{display:none;......}...document.getElementsByClassName("xxx") 返回页面所有xxx类名对象的数组，要想取出其中的一个对象需采用数组的标识[i]， document.getElementsByClassName...注意：对象与对象的属性的区别，不要把对象的属性当作对象去调用，否则无功而返。

5.5K3 0

软技能提升：转转中后台规范落地实践

如果公共资源没有的方案，尽可能的抽取出可公用的部分，返哺给公共组。...{ // 在ES5中有效的结尾逗号（对象，数组等） trailingComma: 'es5', // 不使用缩进符，而使用空格 useTabs: false, /...// 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css...://github.com/stylelint/stylelint-config-standard "stylelint-config-standard") [stylelint-config-css-modules...](https://github.com/css-modules/css-modules "stylelint-config-css-modules") [stylelint-config-rational-order

8943 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭