How to use the react-testing-library.getByTestId function in react-testing-library

test('Changing data render only dependent components', () => {
  const renderCb = jest.fn();
  const { container } = render();

  const loadButton = getByTestId(container, 'loadButton');
  const checkbox = getByTestId(container, 'checkbox');
  const resetButton = getByTestId(container, 'resetButton');

  expect(renderCb).toBeCalledTimes(2);

  act(() => {
    fireEvent.click(loadButton);
  });
  expect(renderCb).toBeCalledTimes(4);

  act(() => {
    jest.runOnlyPendingTimers();
  });
  expect(renderCb).toBeCalledTimes(5);
  expect(renderCb).toBeCalledWith('first');

  act(() => {

it("applies the passed-in fn to the Atom's value and sets the Atom's value to the return value", () => {
    const { container } = enact(() => render());
    enact(() => swap(TEST_ATOM, s => ({ ...s, count: s.count + 1 })));
    expect(getByTestId(container, "target").textContent).toBe(JSON.stringify({ count: 1 }));
  });

test('App loads with initial state', () => {
  const { container } = render();

  const loadingSpan = getByTestId(container, 'loading');
  const errorSpan = getByTestId(container, 'error');
  const checkedDiv = getByTestId(container, 'checked');

  expect(loadingSpan.textContent).toBe('');
  expect(errorSpan.textContent).toBe('');
  expect(checkedDiv.textContent).toBe('Not checked');
});

test('App loads with initial state', () => {
  const { container } = render();

  const loadingSpan = getByTestId(container, 'loading');
  const errorSpan = getByTestId(container, 'error');
  const checkedDiv = getByTestId(container, 'checked');

  expect(loadingSpan.textContent).toBe('');
  expect(errorSpan.textContent).toBe('');
  expect(checkedDiv.textContent).toBe('Not checked');
});

return (
          <div>
            <p data-testid="{&quot;target&quot;}">{val}</p>
          </div>
        );
      }

      const { container: c1 } = enact(() =&gt; render( s[2].a} /&gt;));
      const { container: c2 } = enact(() =&gt; render( s.length} /&gt;));

      expect(getByTestId(c1, "target").textContent).toBe("a");
      expect(getByTestId(c2, "target").textContent).toBe("4");

      enact(() =&gt; swap(TEST_ATOM, s =&gt; s.map(v =&gt; ({ a: v.a.toUpperCase() }))));
      expect(getByTestId(c1, "target").textContent).toBe("A");
      expect(getByTestId(c2, "target").textContent).toBe("4");

      enact(() =&gt; swap(TEST_ATOM, s =&gt; s.map(v =&gt; ({ a: "hello" })).slice(0, 3)));
      expect(getByTestId(c1, "target").textContent).toBe("hello");
      expect(getByTestId(c2, "target").textContent).toBe("3");
    });

);
      }

      const { container, rerender } = render();

      expect(getByTestId(container, "a").textContent).toBe("15");
      expect(getByTestId(container, "b").textContent).toBe("9");
      expect(getByTestId(container, "c").textContent).toBe("hello");

      rerender();
      expect(getByTestId(container, "a").textContent).toBe("15");
      expect(getByTestId(container, "b").textContent).toBe("9");
      expect(getByTestId(container, "c").textContent).toBe("hello");

      rerender();
      expect(getByTestId(container, "a").textContent).toBe("15");
      expect(getByTestId(container, "b").textContent).toBe("9");
      expect(getByTestId(container, "c").textContent).toBe("hello");
    });

renderFn();

        function handleClick() {
          todo.setData(newState);
        }

        return <div>
          <span data-testid="nameValue">{dataSource.name}</span>
          <button data-testid="actionButton" type="button">
          Click me
          </button>
        </div>;
      };

      const { container } = render();
      const nameValue = getByTestId(container, 'nameValue');
      const actionButton = getByTestId(container, 'actionButton');

      expect(nameValue.textContent).toEqual(initState.name);
      expect(renderFn).toHaveBeenCalledTimes(1);

      fireEvent.click(actionButton);

      await sleep(10);

      expect(renderFn).toHaveBeenCalledTimes(2);
      expect(nameValue.textContent).toEqual(newState.name);
    });

function handleClick() {
          todo.setData(newState);
        }

        return <div>
          <span data-testid="nameValue">{dataSource.name}</span>
          <button data-testid="actionButton" type="button">
          Click me
          </button>
        </div>;
      };

      const { container } = render();
      const nameValue = getByTestId(container, 'nameValue');
      const actionButton = getByTestId(container, 'actionButton');

      expect(nameValue.textContent).toEqual(initState.name);
      expect(renderFn).toHaveBeenCalledTimes(1);

      fireEvent.click(actionButton);

      await sleep(10);

      expect(renderFn).toHaveBeenCalledTimes(2);
      expect(nameValue.textContent).toEqual(newState.name);
    });

const todoStore = { name: 'ice' };
      const projectStore = { name: 'rax' };
      icestore.registerStore('todo', todoStore);
      icestore.registerStore('project', projectStore);

      const App = () => {
        const [todo, project] = icestore.useStores(['todo', 'project']);

        return <div>
          <span data-testid="todoName">{todo.name}</span>
          <span data-testid="projectName">{project.name}</span>
        </div>;
      };

      const { container } = render();
      const todoName = getByTestId(container, 'todoName');
      const projectName = getByTestId(container, 'projectName');

      expect(todoName.textContent).toEqual(todoStore.name);
      expect(projectName.textContent).toEqual(projectStore.name);
    });
  });

export const getPocket = (container: HTMLElement, currency: string) => {
  const card = getByTestId(container, `PocketCard-${currency}`)
  const header = getByTestId(card, 'PocketCardHeader')
  const currentAmount = () => getFloatValue(String(header!.textContent))
  return { card, header, currentAmount }
}