crypto.getRandomValues() not supported in React.js

Question

There is a npm package we made for our team usage and inside that we are using this uuidjs. Now I have installed this custom npm package on my Create-React-App which am testing with testing-library.

When I test the component which imports the files from this custom package which has uuidjs I get following error:

crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported

I know there are answers to this questions is install react-native-get-random-values. But my confusion is can I install this in CRA which uses React.js? Is react-native has anything to do with it or its independent?

Answer 1

Problem

When you run your test, I suspect you are running it in a test environment running in Node.js. crypto.getRandomValues is only available from web APIs. It does not exist in Node under crypto, see Node's documentation on crypto. Node does provide a web crypto API which has getRandomValues but the uuid library won't be aware of it.

Solution

You could mock or polyfill crypto.getRandomValues yourself, see: How to use Jest to test functions using crypto or window.msCrypto.

Answer 2

Got the same issue and able to resolve with polyfills.

Added following configs to jest.config.ts

...
setupFiles: ['./jest.polyfills.ts'],
setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
...

Added jest.polyfills.ts file to project root.

if (typeof global.crypto !== 'object') {
    global.crypto = crypto;
}

if (typeof global.crypto.getRandomValues !== 'function') {
    global.crypto.getRandomValues = getRandomValues;
}

function getRandomValues(array) {
    return crypto.webcrypto.getRandomValues(array);
}