Random ID incompatible with shapshot testing

[eliihen]

Hi,

Earlier this week, we started using your component for popover functionality, and so far we think it is just great. We did stumble into an issue today, however, and that is the fact that the popover component is using random IDs.

When doing snapshot tests with react, most of the times we use shallow rendering, but sometimes we are forced to mount components for snapshot testing. In these scenarios we have discovered that this component makes it impossible to use snapshots in its current form. The snapshots keep changing and failing the tests.

The easiest way to fix this is to use a static ID when running in test mode, like this:

id: process.env.NODE_ENV === 'test' ? 'STATIC_ID' : randomID(10, "a"),

Thoughts?

[newyork-anthonyng]

@esphen Have you tried using jest.mock to solve this (see docs here)?

In the top of your test file, try something like:

jest.mock("random-id", () => {
  return () => "STATIC_ID";
});

[eliihen]

Hey @newyork-anthonyng, that's a great idea. I'll try it tomorrow and close this if it works. I can also contribute a section to the README about this if that's something you're interested in.

[newyork-anthonyng]

@esphen Awesome, let me know how it goes.

I'm unsure if this is the best place to document using mocks. Part of me feels like the documentation should reside inside the documentation of the testing framework one is using.

[eliihen]

Part of me feels like the documentation should reside inside the documentation of the testing framework one is using

And it does, just look at the link you posted above. However, I'm sure I'm not going to be the last person to experience this issue, and if a footnote in the README helps reduce the friction of using this library, then I think that's a good idea. Your call, though.

[newyork-anthonyng]

@vaheqelyan What are your thoughts?

[eliihen]

Can't seem to get it to work. No matter how I try to mock random-id, jest completely ignores it. I tried to mock random-id in the test, in the test file, in setupTestFrameworkScriptFile and in moduleNameMapper, but no luck. It never runs.

I created a minimal repro repo at https://github.com/esphen/minimal-jest-popover.

It may have something to do with react-awesome-popovers output. I looked in the node_modules directory, and I see the following:

var randomID = createCommonjsModule(function (module) {
(function(){
	var randomID = function(len,pattern){
		var possibilities = ["abcdefghijklmnopqrstuvwxyz","ABCDEFGHIJKLMNOPQRSTUVWXYZ", "0123456789", "~!@#$%^&()_+-={}[];\',"];
		var chars = "";

		var pattern = pattern ? pattern : "aA0";
		pattern.split('').forEach(function(a){
			if(!isNaN(parseInt(a))){
				chars += possibilities[2];
			}else if(/[a-z]/.test(a)){
				chars += possibilities[0];
			}else if(/[A-Z]/.test(a)){
				chars += possibilities[1];
			}else{
				chars += possibilities[3];
			}
		});
		
		var len = len ? len : 30;

		var result = '';

		while(len--){ 
			result += chars.charAt(Math.floor(Math.random() * chars.length)); 
		}

		return result;
	};

	if('object' !== "undefined" && typeof commonjsRequire !== "undefined"){
		module.exports = randomID;
	} else {
		window["randomID"] = randomID;
	}

})();
});

The randomID package is inlined into the react-awesome-popover library instead of requiring the package from node_modules. This could be an issue when we try to mock it with jest.