配置jest让其window上存在ontouchstart

如果你的代码里有一段是这样的:
// 是否支持touch事件
export const SUPPORT_TOUCH = ('ontouchstart' in window);
复制代码
因为默认jest集成的jsdom的window上是没有ontouchstart属性的, 所以我们需要自己加一个:
// jest.config.js
module.exports = {
    ...
    globals: {
        ontouchstart: null
    }
};
复制代码
现在在每个测试文件中, 都可以直接识别到ontouchstart了, 是不是很简单 ?

转载于:https://juejin.im/post/5c5658f65188256282694ed2

### 如何在 React 项目中配置 Jest 进行单元测试 #### 配置基础 对于基于 Create React App 创建的项目,默认情况下已经集成了 Jest 并完成了基本配置,因此无需额外的手动设置即可运行测试用例[^2]。然而,在自定义配置的项目中,则需要手动调整 `package.json` 文件中的测试脚本部分。 #### 安装依赖项 如果尚未安装必要的包,可以通过以下命令来完成安装: ```bash npm install --save-dev jest @testing-library/react react-test-renderer ``` 这些包的作用分别是: - **Jest**: 提供核心测试功能。 - **@testing-library/react**: 是专门用于 React 组件测试的一个工具库,它允许通过虚拟 DOM 方便地编写测试案例[^1]。 - **react-test-renderer**: 支持浅渲染和快照测试等功能。 #### 修改 package.json 中的 scripts 字段 为了使预提交钩子生效并自动运行 ESLint 和相关测试,可以按照如下方式修改或新增 `scripts` 属性以及引入 `lint-staged` 插件的相关设定: ```json { "scripts": { "test": "jest", "precommit": "lint-staged" }, "lint-staged": { "ignore": [ "build/*", "node_modules" ], "linters": { "src/*.js": ["eslint --fix", "git add"], "src/components/**/*.js": ["jest --findRelatedTests --config .jest.js", "git add"] } } } ``` 上述 JSON 片段展示了如何让 pre-commit hook 自动触发指定目录下的 JavaScript 文件进行语法校验与关联测试[^4]。 #### 设置 transform 参数 为了让 Jest 正确解析 `.ts`, `.tsx`, `.js`, 或者 `.jsx` 类型文件的内容,需适当调整 Babel 的转换规则或者直接编辑项目的根目录下名为 babel.config.js (或其他形式) 的配置文档;另外也可以考虑创建一个单独的小规模 jest 配置档案比如`.jest.js`用来覆盖默认行为: ```javascript module.exports = { transform: { '^.+\\.tsx?$': 'ts-jest', '^.+\\.jsx?$': 'babel-jest' }, }; ``` 此代码片段指定了不同扩展名对应的处理器插件名称,从而确保所有类型的源码都能被正确编译后再参与后续流程处理[^3]。 #### 启动测试环境前准备工作 最后一步就是确认整个开发环境中不存在冲突版本号或者其他潜在干扰因素之后再尝试执行 npm run test 命令验证一切正常工作与否。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值