How to use @testing-library/svelte - 10 common examples

it('exitOnEsc: true - ESC cancels the tour', async() => {
      const tour = new Tour();
      const step = new Step(tour, {});
      const stepCancelSpy = spy(step, 'cancel');

      const { container } = render(ShepherdElement, {
        props: {
          step
        }
      });
      fireEvent.keyDown(container.querySelector('.shepherd-element'), { keyCode: 27 });
      expect(stepCancelSpy.called).toBe(true);
    });

async function renderAndWait(component, options) {
  const renderedComponent = render(component, options);
  await wait();
  return renderedComponent;
}

it('is enabled when false', () => {
      const config = {
        disabled: false
      };

      const { container } = render(ShepherdButton, {
        props: {
          config
        }
      });

      const button = container.querySelector('.shepherd-button');
      expect(button.disabled).toBeFalsy();
    });

it('Should render greeting', () => {
		const { container } = render(MyAwesomeComponent, {
			props: { name: 'world' },
		});

		expect(container.querySelector('h1')).toHaveTextContent('Hello world!');
	});
});

it('renders buttons for each item passed to `options.buttons`', () => {
    const step = {
      options: {
        buttons: [
          defaultButtons.cancel,
          defaultButtons.next
        ]
      }
    };

    const { container } = render(ShepherdFooter, {
      props: {
        step
      }
    });

    const buttons = container.querySelectorAll('.shepherd-footer .shepherd-button');
    expect(buttons.length).toBe(2);

    const cancelButton = container.querySelector('footer .cancel-button');
    expect(cancelButton).toHaveAttribute('tabindex', '0');
    expect(cancelButton).toHaveClass('shepherd-button-secondary cancel-button shepherd-button');
    expect(cancelButton).toHaveTextContent('Exit');

    const nextButton = container.querySelector('footer .next-button');
    expect(nextButton).toHaveAttribute('tabindex', '0');
    expect(nextButton).toHaveClass('shepherd-button-primary next-button shepherd-button');

.string()
          .required()
          .email(),
      }),
    });
    const {
      container,
      component,
      getByPlaceholderText,
      getByText,
    } = await render(App, {
      props: { schema },
    });
    const emailInput = getByPlaceholderText('Email');

    await fireEvent.change(emailInput, {
      target: { value: 'invalid value' },
    });
    await fireEvent.blur(emailInput);
    await wait(() => {
      expect(getByText('user.email must be a valid email')).toBeInTheDocument();
    });
    expect(component.form.$$.ctx.$errors).toEqual({
      user: { email: 'user.email must be a valid email' },
    });

    expect(container.firstChild).toMatchSnapshot();
  });

it('does not validate on change if validateOnChange is false', async () => {
    const schema = yup.object().shape({
      email: yup.string().email(),
    });
    const { component, getByPlaceholderText } = await render(App, {
      props: { schema, validateOnChange: false },
    });

    const emailInput = getByPlaceholderText('Email');

    await fireEvent.change(emailInput, {
      target: { value: 'invalid value' },
    });
    await wait();

    expect(component.form.$$.ctx.$errors).toEqual({});
  });

it('click on submit button dispatches submit event and sets isSubmitting to true', async () => {
    const { component, getByText } = await render(App, {
      props: { onSubmit: jest.fn() },
    });
    const signInButton = getByText('Sign in');

    expect(component.form.$$.ctx.$isSubmitting).toBe(false);
    expect(signInButton).not.toHaveAttribute('disabled');

    await fireEvent.click(signInButton);
    await wait();
    expect(component.onSubmit).toHaveBeenCalledTimes(1);
    expect(signInButton).toHaveAttribute('disabled');
    expect(component.form.$$.ctx.$isSubmitting).toBe(true);
  });

it('cancel icon cancels the tour', async() => {
    const tour = new Tour();
    const step = new Step(tour, {
      cancelIcon: {
        enabled: true
      }
    });
    const stepCancelSpy = spy(step, 'cancel');

    const { container } = render(ShepherdHeader, {
      props: {
        step
      }
    });

    fireEvent.click(container.querySelector('.shepherd-cancel-icon'));
    expect(stepCancelSpy.called).toBe(true);
  });
});

it('validates on blur if validateOnBlur is true', async () => {
    const schema = yup.object().shape({
      email: yup.string().email(),
    });
    const { component, getByPlaceholderText } = await render(App, {
      props: { schema, validateOnChange: false, validateOnBlur: true },
    });

    const emailInput = getByPlaceholderText('Email');

    await fireEvent.change(emailInput, {
      target: { value: 'invalid value' },
    });
    await fireEvent.blur(emailInput);
    await wait();

    expect(component.form.$$.ctx.$errors).toEqual({
      email: 'email must be a valid email',
    });
  });