simenbrekken-visma

function Table() {
  // Dummy example
  const [page, setPage] = useState(0);
  const pages = 5;
  const hasMore = page < pages;
  
  function loadMore() {
    setPage(previousPage => previousPage + 1);
  }

simenbrekken-visma

This novel workaround simply hides any command log entries that originate from fetch/XHR requests.

While I've updated this receipe for Cypress 10 and converted it to TypeScript you should be able to use it in a JavaScript project by ignoring the cypress.d.ts file and placing the snippet from e2e.ts in e2e.js instead.

simenbrekken-visma

/**
 * React overwrites the native value setter for HTMLInputElement so have to go deeper.
 *
 * @see https://github.com/facebook/react/issues/11600#issuecomment-345813130
 */
function setNativeInputValue(input: HTMLInputElement, value: string) {
    Object.getOwnPropertyDescriptor(
        HTMLInputElement.prototype,
        'value'
    )?.set?.call(input, value);

simenbrekken-visma

export function getLocalStorageItem<T>(key: string, initialValue: T): T {
    try {
        const item = window.localStorage.getItem(key);

        return item ? JSON.parse(item) : initialValue;
    } catch (error) {
        console.warn(`Could not get localStorage key "${key}"`, error);

        return initialValue;
    }

simenbrekken-visma

/**
 * Redispatch event with composed flag to propagate it through the shadow DOM.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
 */
function redispatchComposedEvent(event: Event) {
    event.stopPropagation();

    const composedEvent = new Event(event.type, {
        bubbles: event.bubbles,