testing-library / testing-library/testing-library-docs

Document better the details of aync methods

Open
#1,012 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
479
Forks
740
PR merge metrics
No merged PRs in 30d

Description

Is your feature request related to a problem? Please describe.

In the example seen at the bottom of this issue, I get flaky results. The assertion passes sometimes and fails sometimes. This comes from a lack of understanding by me of how async methods work. I've Googled the heck out of it and read the docs linked below a bunch of times. I also looked through the source code, but I found it to be difficult to understand from someone who hasn't worked in this project.

Describe the solution you'd like

Ultimately, I think there are a couple of waitFor options that should be documented in more detail. I'd like the below questions to be answered.

  • What is the behavior of interval option?
  • What is the behavior of the timeout option?

I think this should be covered in detail here: https://testing-library.com/docs/dom-testing-library/api-async/

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

NA

Additional context Add any other context or screenshots about the feature
request here.

Example code that has flaky results. I don't think the details of useDataFetch is important here, but let me know if I can answer any questions about it.

it('displays fetched data', async () => {
  const increment = createIncrement();
  const MyComponent = () => {
    const { data } = useDataFetch(async () => {
      await sleep(1);
      return increment();
    });
    return <div>times fetch called: {data}</div>;
  };
  
  render(<MyComponent />);
  const element = await screen.findByText('times fetch called: 2');
  expect(element).toBeInTheDocument();
});

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/wait-for.js and the linked dom-testing-library/api-async page, then compare the existing waitFor documentation with the issue’s interval and timeout questions. Done means the page explains both option behaviors clearly enough to address the flaky example and help readers understand the timing.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
documentation, testing-qa
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.