Skip to content

no-wait-for-side-effects.md

Latest commit

 

History

History
112 lines (89 loc) · 3.44 KB

no-wait-for-side-effects.md

File metadata and controls

112 lines (89 loc) · 3.44 KB

testing-library/no-wait-for-side-effects

📝 Disallow the use of side effects in waitFor.

💼 This rule is enabled in the following configs: badge-angular angular, badge-dom dom, badge-marko marko, badge-react react, badge-svelte svelte, badge-vue vue.

🔧 This rule is automatically fixable by the --fix CLI option.

Rule Details

This rule aims to avoid the usage of side effects actions (fireEvent, userEvent or render) inside waitFor. Since waitFor is intended for things that have a non-deterministic amount of time between the action you performed and the assertion passing, the callback can be called (or checked for errors) a non-deterministic number of times and frequency. This will make your side-effect run multiple times.

Example of incorrect code for this rule:

  await waitFor(() => {
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    expect(b).toEqual('b');
  });

  // or
  await waitFor(function() {
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    expect(b).toEqual('b');
  });

  // or
  await waitFor(() => {
    userEvent.click(button);
    expect(b).toEqual('b');
  });

  // or
  await waitFor(function() {
    userEvent.click(button);
    expect(b).toEqual('b');
  });

  // or
  await waitFor(() => {
    render(<App />)
    expect(b).toEqual('b');
  });

  // or
  await waitFor(function() {
    render(<App />)
    expect(b).toEqual('b');
  });
};

Examples of correct code for this rule:

  fireEvent.keyDown(input, { key: 'ArrowDown' });
  await waitFor(() => {
    expect(b).toEqual('b');
  });

  // or
  fireEvent.keyDown(input, { key: 'ArrowDown' });
  await waitFor(function() {
    expect(b).toEqual('b');
  });

  // or
  userEvent.click(button);
  await waitFor(() => {
    expect(b).toEqual('b');
  });

  // or
  userEvent.click(button);
  await waitFor(function() {
    expect(b).toEqual('b');
  });

  // or
  userEvent.click(button);
  waitFor(function() {
    expect(b).toEqual('b');
  }).then(() => {
    // Outside of waitFor, e.g. inside a .then() side effects are allowed
    fireEvent.click(button);
  });

  // or
  render(<App />)
  await waitFor(() => {
    expect(b).toEqual('b');
  });

  // or
  render(<App />)
  await waitFor(function() {
    expect(b).toEqual('b');
  });
};

Further Reading