在Create-React-App中使用含uuidjs的自定义npm包测试时遇crypto.getRandomValues()不支持问题:能否安装react-native-get-random-values?
crypto.getRandomValues()不支持问题 我来帮你理清这个问题并给出适合的解决方案:
关于react-native-get-random-values在CRA项目里的使用
首先明确:不推荐在纯React.js(Web)的Create React App项目中安装react-native-get-random-values。这个包是专门为React Native环境打造的——因为React Native的原生运行环境没有内置Web标准的crypto API,所以用它来补全这个能力。它和纯Web的React项目完全是两个独立的技术栈,没有关联,强行安装不仅解决不了你的问题,还可能带来多余的依赖或潜在冲突。
针对CRA测试环境的正确解法
你遇到的错误是在testing-library测试时触发的,核心原因是Jest的默认测试环境没有提供完整的Web crypto API支持。这里有两个实用的解决办法:
方法1:手动模拟crypto API
在你的测试文件顶部,或者全局测试配置文件(比如src/setupTests.js)中添加这段模拟代码:
// 为测试环境模拟crypto.getRandomValues方法 global.crypto = { getRandomValues: (array) => { for (let i = 0; i < array.length; i++) { array[i] = Math.floor(Math.random() * 256); } return array; }, };
这段代码会给测试环境提供一个简单的getRandomValues实现,刚好能满足uuidjs的需求。
方法2:使用专用的Jest模拟包
如果你不想手动写模拟代码,可以用jest-webcrypto-mock这个专门为Jest打造的包,它能完整模拟Web Crypto API:
- 先安装开发依赖:
npm install --save-dev jest-webcrypto-mock
- 在
src/setupTests.js中导入启用:
import 'jest-webcrypto-mock';
之后所有测试用例都会自动拥有可用的crypto API,不用再单独处理。
额外提醒
如果你的项目在生产环境也遇到这个问题(这种情况很少见,现代主流浏览器都支持crypto API),可以考虑引入crypto-browserify作为polyfill,但通常Create React App已经处理了基础的浏览器兼容问题,你当前的问题明显是测试环境导致的,优先用上面的两种测试环境解法即可。
内容的提问来源于stack exchange,提问作者Nikita Kumari

