Guide on creating idompotent tests using React Testing library

[charlieforward9]

With only a few months under my belt with BDD/TDD, I am still learning how to structure these tests to be valid and isolated from each other.

With the Feature/Scenario hierarchy, I am still figuring out how to test unique capabilities (scenarios) of a component (feature) within the same test file without having overlap between scenarios.

For example, when testing a search bar, I type abc and then check for results. In the next scenario, I would type def. However, I am having an issue where it does not reset the previous scenario and I get abcdef in the search bar. I ham including Before/AfterEachScenario hooks, but it would be nice to have some sort of auto reset if we are using the React Testing Library render method

I will continue developing and possibly make a template repo for this if I figure it out.

[amiceli]

vitest-cucumber is framework agnostic, so it won't provide logic for a specific framework. In my (company or side) projects using Vue, we use hooks to set/reset components, mocks etc. Like you do ;).

I made a template repo for Vue not for React. I don't use this framework so I like your idea ! If you do a template for React I will include it in doc and you as contributor ;).

[charlieforward9]

Great, I will take this as a task, if youd like to add me as the assignee, I will have it in my task list as something to get around to when I have some extra time.

[charlieforward9]

CC// @sainaruufl will be working on this as well. Create sample with https://github.com/testing-library/react-testing-library-help

Refs: https://testing-library.com/docs/react-testing-library/api https://github.com/testing-library/react-testing-library/issues/218

[charlieforward9]

@amiceli I notice you say this repo is for

using Gherkin in your unit tests

Is there a reason you did not specify all types of testing?

We are trying to use this structure for component and e2e, and want to make sure that the scenarios are isolated from each other.

Can you confirm that the Scenarios of a feature do not share any state that is defined within the scenario block?

[amiceli]

I made this repo when I needed Gherkin in my company/side projects for unit tests. I never tested vitest-cucumber with e2e tests. For me vitest is for unit tests and, for example,cypress for e2e tests.

For state, each Scenario is a describe. If you defined a variable in a Scenario isn't shared with others.

[charlieforward9]

Tracks https://github.com/testing-library/react-testing-library/issues/1331

[charlieforward9]

We are still having issues with creating idempotent tests. We are unsure where the problem stems from, but are continuing to look into this to create a testing template with vitest + vitest-cucumber + react-testing-library (with a custom Redux wrapper).

Our main issue is with the redux state

• When calling render within describeFeature, it does not reset across Scenarios
• When calling render within Scenario, actions (type, click, etc) do not update the component...

[saiNaruUFL]

To add on to the post above, the issue we are having follows this -> https://stackoverflow.com/questions/67062331/how-to-reset-redux-store-after-each-test-using-testing-library-react-in-next-js#comment118538998_67062331

[amiceli]

If you use rerender inside describe, afterAll, etc without vitest-cucumber but just with vitest, you have same issue ?

[charlieforward9]

We found a fix, we were messing up with our useAppDispatch hook which was causing problems down the line. We will be publishing a vitest-cucumber template repo soon for this library that incorporates testing-library/react and react-redux.

@saiNaruUFL can be assigned to this since he will be making the example repo.

[amiceli]

No updated for a while, I closed. It will re-open if this issue is updated ;).

[charlieforward9]

@amiceli We were not able to generate an example library yet due to other priority tasks, however, we are having @saiNaruUFL create test documentation and if he thinks he can do it within a day, this will be a helpful piece of our internal docs.

I would keep this open in favor of https://github.com/amiceli/vitest-cucumber-example/issues/1 given its documented much better with more context.

[amiceli]

All right, I keep it open ;).

[saiNaruUFL]

Here is the Vitest-Cucumber_RTL_Template: https://github.com/Agriculture-Intelligence/vitest-cucumber_rtl_template

[charlieforward9]

@amiceli this repo is now available to be added into your docs as a template for your awesome package. I will close it out on my end as the task is now complete.

[amiceli]

Well done ! I'm going to add it in the doc ;).

[amiceli]

I added it on the readme.