Tests questions + Little "Honor"

[quirino-cargill]

I do follow you a lot. Sometimes we exchanged some chat on Twitter too.
( honestly, you, Dan Abramov and Ryan Florence are actually the reason cause I do use twitter, not a big fan of socials).

Few days ago you sent me a post in your blog about Colocation, which actually I had read already before you sent me that (we were chatting about streams for communicating through react components).

Sorry for the long preface, btw recalling that article, I would like to ask you one question about how do you structure usually jest configs instead.

• When running integration and unit tests, do you usually have two different configs, or how do you structure all the jest setup?

• And how do you usually integrate the flow of unit tests/integration tests with CI/CD or precommit/prepush hooks (husky or default git ones)?

It would be nice to know if you have any good practice about these setups and workflows, and if I missed the article I am sorry about it! (p.s. ofc I did read the one where you instead explain how do you place the related test files).

Just the little honor part, taken by what you all do for the community, I did write my first article on medium.
On the side that I would be glad and honored to have a feedback about it from you, I am specially interested about your opinion of designing components in this way:

https://medium.com/@quirinolorusso/design-declarative-react-components-6b71c9cfeecb

[kentcdodds]

Thanks for the question @quirino-cargill!

I answered on my podcast: https://www.briefs.fm/3-minutes-with-kent/126

Congrats on the article :) That looks pretty idiomatic to me. Though I'm not sure I see the value in having ButtonGroupItem (which is just a wrapper around <button>). There is some value I suppose in DeclarativeButtonGroup because it adds the className, but I'm not sure it's necessary. So the end result could be simply:

  <div className="btn-group">
    <button onClick={() => console.log('Save')}>Save</button>
    <button onClick={() => console.log('Reset')}>Reset</button>
    <button
      disabled={someTextProp === 'disabled'}
      onClick={() => console.log('Disabled')}
    >
      Disabled
    </button>
    <button onClick={() => console.log('Cancel')}>Cancel</button>
  </div>

Which requires no abstraction. But yeah, great that you're encouraging people to use idiomatic React practices rather than making abstractions that make code less flexible and more confusing!

[kentcdodds]

Whoops, forgot to add the link to the blog post: https://www.briefs.fm/3-minutes-with-kent/126

[quirino-cargill]

@kentcdodds Honored by your reply! will read carefully the link you shared if you covered these topics already!

Looks like I missed that article!

Yeah you got the point, there is not value in that component itself, it was just to show a simple example where to express that design pattern for designing components.

Thanks again for the time you spend for the community!

Have a good one!