Unit tests for components

[jeanbauer]

Hey there 👋, great work here!

Are you planning to add a test strategy to Chakra?

I'd be glad to open a PR to add React Testing Library to cover some components.

[segunadebayo]

@jeanbauer Yes, please open a PR to add tests to Chakra components.

I don't fully understand the testing process just yet that's why I left it out. I'm watching Kent C Dodd's video to get me up to speed.

This is a welcome contribution.

[Vynlar]

I have experience with react-testing-library and would be willing to work on component tests.

[segunadebayo]

That's great @Vynlar . It'll be good to add component tests. I guess I'll leave this part to @Vynlar and @jeanbauer.

Thanks for your contribution.

[intyro]

I would like to contribute to the coverage as well, Is there any way to manage that?

[Vynlar]

I think the best first step would be for someone to setup jest and react-testing-library and get a proof of concept test setup. Then we can each claim some components to write tests for so we don't step on each other's toes. Who is willing to setup the testing environment?

[balazsorban44]

@Vynlar I may have a look at it in today/tomorrow!

[Vynlar]

Hey folks! I did some tinkering and I have a basic working test setup. I elected to use Typescript for the tests which allows us to test both the components and the type definitions at once.

Let me know what you guys think: Vynlar@cd01c8b#diff-a45f25bc73885900146a02b97ab0c0a4

[balazsorban44]

@Vynlar Don't think afterEach(cleanup) is needed anymore: testing-library/react-testing-library#430

Also, I feel wrapping everything in a describe will make the code harder to look at. You are already in the Badge test file, it should be obvious you write tests for that component. Kent. C. Dodds wrote somewhere I think, he also feels it is unnecessary mental load. (Not these exact words, but I'm sure he didn't prefer wrapping with describe a whole test file)

[Vynlar]

@balazsorban44 Thanks for the feedback. I should keep up with the changes in RTL more closely. I've updated my PR to reflect your suggestions: master...Vynlar:feature/unit-tests#diff-a45f25bc73885900146a02b97ab0c0a4

Everyone else, I'd like some feedback on the use of the utils/testing file to wrap all the tests in the ThemeProvider. I feel like there is a better solution. Thoughts?

[jeanverster]

First off, thanks @segunadebayo for this library, looks really great! Have been looking for a UI lib utilising styled-system for ages.

@Vynlar, nice work on getting some tests going! Just a couple things - I'm not sure a snapshot test that size is the best route to go, anything bigger than 50+ lines often gets overlooked and just updated when they don't match, which kinda defeats the purpose? What do you reckon? But I like the idea of creating a custom render function which encapsulates the ThemeProvider, and keeping it in a testing util file seems like a good idea to me 👍

Also have some experience with RTL, happy to jump in and start writing some tests if possible :)

[Vynlar]

@jeanbauer I struggled with this problem initially. I see a few alternatives:

• Generate a test for each variant/color combo (feels wrong to me but I'd like opinions)
• Hard-code the test cases manually (could be more clear)

Anything else anyone can think of?

EDIT: One thing I would like to see is a way to enforce exhaustiveness for these variants. I would like for the tests to fail if one of the variants is not represented in the tests. Could someone more savvy with typescript help out with that?

EDIT2: I've written out all the strategies I thought of and I think this is the best so far as it keeps the tests very clear and each case isolated: master...Vynlar:feature/unit-tests

[Vynlar]

I've opened a PR for the basic unit tests. I'd like some feedback on the extra decisions I made

[jestrux]

@Vynlar @jeanbauer What components are you currently writing tests for so I can pick something else?

[Vynlar]

I've started back up on this on the dev-ts branch. Doing lots of learning about how jest works in the context of a monorepo. I'll post things here as I discover more.

[segunadebayo]

@Vynlar, the dev-ts branch uses TSDX so there's not much setup needed. We just need to start writing tests. I already installed @testing-library/react as well.

[rGiladi]

@segunadebayo

Any updates on this?
I can add tests, just want to know if anyone has already started or currently on it.

[segunadebayo]

Hi @RoyGil.

Feel free to start adding some tests on the dev-ts branch. We're currently migrating to TypeScript and it makes sense to have the test there.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.Thank you for your contributions.