This kata is now unsolvable because Enzyme's shallow also calls componentDidMount and componentDidUpdate now: https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md

Why is default value of color null until it's mounted? null is not a color.

Why is this kata not using React.Component?

Why is this kata not using React.Component?

Why is this kata not using React.Component?

It is totally unclear from the description that the color of the top of the border should be set to a random color instead of the default "null" when the component is actually mounted, so this should at least be stated explicitly in the description.

But actually, the "random color" thing does not seem to add much value to this Kata and is IMO rather distracting. Perhaps consider removing it altogether?

Needs "true" random tests, on top of the current mocked Math.random() values

Needs more fixed tests and random tests. For example, try simulating input values of different length and see if selection on clicking works properly to prevent hardcoding.

Offline listener was tested but online listener should be tested as well.

To make this kata even more useful for learning it's worth adding a short description of custom hooks. Why they are used, when and how. A reference to a reactjs.org texts could help too.

Hello, What method i need to use after "render", i tried using lifecycle methods but it didnt work?

const wrapper = mount(<Counter/>);
expect(wrapper.children().props().style.borderTop).toEqual('10px solid pink');

The default color is null, why on earth is the expected color right after object creation "pink"?