webpack之jest-webpack测试

最新推荐文章于 2024-04-18 09:53:45 发布
最新推荐文章于 2024-04-18 09:53:45 发布
阅读量6.2k 收藏
点赞数 1
分类专栏： 技术篇 jest-webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40860137/article/details/106397189
版权

1.安装

npm i jest jest-webpack -D
2. 新增一条配置项(在packjson.js)

3.新建一个跟webpack.config.js同级的tests文件夹, 因为jest-webpack测试的时候会去找这个文件

4.在src/js/index.js文件夹中写入

5.在tests文件下面创建一个index.test.js文件, 这个文件需要require需要测试的文件, 这里不需要import的原因是因为不需要编译, 直接测试即可, node支持require, webpack支持import, 如果是import, 需要先编译一下

 

 

 

涵信
关注
专栏目录
jest-webpack：将jest与webpack一起使用
02-06
开玩笑的webpack 一个帮助工具和webpack插件，用于集成和 。 将其作为开发人员依赖项添加到您的项目中。 并从命令行或以package.json脚本的形式像webpack或webpack-dev-server一样运行它。 安装 npm install --save-dev jest-webpack 或与yarn yarn add -D jest-webpack 更新package.json 将其添加为package.json脚本 { " name " : " my-package " , " scripts " : { " test " : " jest-w
休息2天
weixin_34117522的博客
11-21 137
明天周末，好好休息一下~ 作者：毒逆天 出处：https://www.cnblogs.com/dotnetcrazy 打赏：18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z 本文版权归作者和博客园共有。欢迎转载，但必须保留此段声明，且在文章页面明显位置给出原文连接！ ...
在webpack项目中使用jest进行单元测试
zrq1210的博客
10-16 1171
安装单元测试依赖 - jest 运行如下命令：安装依赖 yarn global add jest // or yarn add --dev jest 更多可参考文章：xxx 当我们想用es6提供的import来导入模块或者想要async的时候，就需要用babel转换 安装babel-loader相关依赖 运行如下命令：安装依赖(todo: 看看哪些是安装在dev环境的 @babel/core） yarn add --dev babel-loader @babel/core @babel/preset
webpack入门测试
weixin_34184561的博客
04-25 164
2019独角兽企业重金招聘Python工程师标准>>> ...
webpack——冒烟测试
qq_32944491的博客
02-03 978
1.构建是否成功 每次构建完成 build 目录是否有内容输出 · 2.是否有 JS、CSS 等静态资源文件 ·是否有 HTML 文件 冒烟代码如下： // 执行的命令 node test/smoke/index.js // node插件rimraf去找到webpack.prod.js文件去生成template的dist文件 // 根据webpack回调函数的两个参数去判断构建是否成功，第一个返回值是错误，第二个返回的是状态 // 再去检测构建成功生成的dist是否含有相应的js,html文件（应用moch
react-webpack-jest-flux-react-router:React 项目的入门包
06-04
入门 React Webpack ＃＃＃安装 npm install bower install ＃＃＃用法 npm run dev 它将能够在 ###Tests npm run test ReactJS 开玩笑（测试） 助焊剂 网络包 带有 BabelJS 的 ES6
jest-webpack-alias:Jest预处理器，能够使用Webpack别名解析require（）语句
05-17
jest-webpack-alias Jest的预处理器，能够使用Webpack别名解析require()语句。 :warning: 考虑将用于新项目，而不是jest-webpack-alias 。 可以在看到一个示例设置。 安装 npm install --save-dev jest-webpack-...
webpack-typescript-jest-less:我从头开始创建的一个React应用，使用了webpack 5，TypeScript，Less和CSS模块，Jest和Enzyme
04-13
一个具有webpack 5，TypeScript，Less Modules和Jest的React App 安装依赖项 yarn 在本地运行 yarn dev 运行测试 yarn test 建立 yarn build:dev 或者 yarn build:prod 历史/步骤
workerloader-jest-transformer:Web Webpack工人装载机的开玩笑变压器
05-06
Webpack工人装载机的Jest变压器 :warning: 该变压器是高度实验性的。 任何贡献和建议将不胜感激！ 该转换器可帮助您将测试与。 受启发 安装 npm install workerloader-jest-transformer --save-dev 或者 yarn add...
webpack打包测试_webpack入门笔记(一)
weixin_39771987的博客
12-13 246
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack是前端工程构建工具，实现前端工程自动化：自动转化、自动装载、自动更新；打包后的结果：...
webpack打包测试_webpack学习笔记（1）
weixin_39690105的博客
12-21 76
今天学习了一下webpack，一开始使用vue-cli是无比的爽，开箱即可用，但是这会让我联想到，是什么让这些静态文件都引入到html中的，代码呢，肯定是隐藏了，我只知道vue-cli是用webpack去打包的，那么问题来了，是不是我学好了webpack我就可以自己去搭建手脚架了？先不多说操练起来。我是参考webpack的官方文档去做测试的起步 | webpack 中文网​www.webpackj...
Web 前端 之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程
仙魁XAN
07-02 1085
目录Web 前端 之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程一、简单介绍二、实现原理三、环境搭建node （npm） 的安装 修改 npm 全局包安装路径 （就可以将全局包不安装在C盘）安装cnpm,解决npm安装速度慢甚至不能安装的问题全局安装 webpack 全局安装 webpack-cli四、webpack 进行代码打包（webpack --mode=development ./app.js）五、webpack 进行代码打包（webpack --config we
webpack html 导入,如何在Jest测试中使用我的webpack的html-loader导入？
weixin_39951929的博客
07-02 161
我刚刚开始使用Jest测试框架,虽然直接单元测试工作正常,但我在测试其模块中的任何组件(通过babel webpack的ES模块)需要HTML文件时遇到大量问题.这是一个例子：import './errorHandler.scss';import template from './errorHandler.tmpl';class ErrorHandler {...我正在加载我在Jest的packa...
探索 Jest, Cypress, React, Babel 和 Webpack 的集成方案：`jest-cypress-react-babel-webpack`
最新发布
gitblog_00084的博客
04-18 361
探索 Jest, Cypress, React, Babel 和 Webpack 的集成方案：jest-cypress-react-babel-webpack 项目地址:https://gitcode.com/kentcdodds/jest-cypress-react-babel-webpack 在前端开发中，我们常常需要面对各种工具和技术的整合与配置。一个高效、稳定的集成环境能够大大提升开发效率...
Vue+Webpack+Typescript+Jest从零开始搭建
Jerry_CSDN_YZR的博客
08-21 2111
Vue+Webpack+Typescript+Jest从零开始搭建 为了能够环境的搭建，参考了以下教程： Vue+webpack https://blog.csdn.net/nsrainbow/article/details/80754968 jest https://jestjs.io/docs/zh-Hans/getting-started vue+typescript http...
jest测试html2text,单元测试 – 使用Jest测试Webpack构建的React组件
weixin_33225622的博客
06-16 162
我遇到了一个问题,我需要在由Webpack构建的React应用程序上运行Jest测试.问题是处理Webpack通常用加载器处理的CSS文件和图像等的要求.我需要知道正确测试组件的最佳方法是什么.React组件：import React from 'react';// The CSS file is the problem as I want to actually test what it// r...
Jest测试遇到的问题
来者往者
05-11 8130
###日结博客 11.5 18 HZ记录Jest运行的问题关于webpack里alias的问题由于在webpack配置了路径别名，所以在你shallow/mount/render时报路径错误解决方案// 在package.json Jest里加入 "moduleNameMapper": {      "^components(.*)$": "<rootDir>/src/compon...
全栈测试实战：用Jest测试Vue+Koa全栈应用
weixin_33748818的博客
11-16 724
本文首发于我的博客，欢迎踩点~ 前言今年一月份的时候我写了一个Vue+Koa的全栈应用，以及相应的配套教程，得到了很多的好评。同时我也在和读者交流的过程中不断认识到不足和缺点，于是也对此进行了不断的更新和完善。本次带来的完善是加入和完整的前后端测试。相信对于很多学习前端的朋友来说，测试这个东西似乎是个熟悉的陌生人。你听过，但是你未必做过。如果你对前端（以及nodejs端）测试很熟悉，那么本文的帮助...
从零搭建前端开发环境（零）——扩展篇：3.jest单测
04-02 1812
从零搭建前端开发环境（零）——基础篇：1.npm、git及项目初始化 从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置 从零搭建前端开发环境（零）——扩展篇：3.jest单测 从零搭建前端开发环境（零）——扩展篇：4.eslint统一代码规范 从零搭建前端开发环境（零）——终极篇：5.构建自己的前端脚手架 注：扩展篇里的内容，并不是建立项目的必要条件，属于可选范围...
{ "name": "ts_base", "version": "1.0.0", "description": "", "main": "./src/index.ts", "scripts": { "start": "webpack-dev-server --mode development --config ./build/webpack.config.js", "build": "webpack --mode production --config ./build/webpack.config.js", "lint": "eslint src --ext .js,.ts", "test": "jest" }, "keywords": [ "TypeScript" ], "author": "liangxiao", "license": "ISC", "devDependencies": { "@types/jest": "^24.0.15", "@types/jquery": "^3.3.29", "@types/source-map": "^0.5.2", "@typescript-eslint/eslint-plugin": "^1.10.2", "@typescript-eslint/parser": "^1.10.2", "awesome-typescript-loader": "^5.2.1", "clean-webpack-plugin": "^3.0.0", "eslint": "^5.16.0", "fork-ts-checker-webpack-plugin": "^1.3.7", "html-webpack-plugin": "^3.2.0", "jest": "^24.8.0", "ts-jest": "^24.0.2", "ts-loader": "^6.0.2", "typescript": "^3.5.1", "webpack": "^3.6.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^2.6.9", "webpack-merge": "^4.2.1" }, "dependencies": { "jquery": "^3.4.1", "moment": "^2.24.0" } } 配置是否正确
07-20
其中，`webpack`、`webpack-cli`和`webpack-dev-server`的版本比较旧，不兼容当前的Webpack配置文件。此外，`awesome-typescript-loader`也不再推荐使用，而是建议使用更现代的`ts-loader`。 为了解决这个问题，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值