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?

we need more react kata

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.

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

reallly not cllear what need to do with it, who can help?

You should not use getElementById method here. Just use event.target during handling the event.

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.

it sounds pity but I made "fitting the response" otherwise I wouldn't discuss here anything

my solution is not using hooks because it didn't work as I expected and I've rewritten it with class then