Use forms with or without client-side JavaScript--no code duplication required!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

client.test.tsx 1.3 KiB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import * as React from 'react';
  2. import {
  3. vi,
  4. describe,
  5. it,
  6. expect,
  7. afterEach,
  8. } from 'vitest';
  9. import userEvent from '@testing-library/user-event';
  10. import { render, screen, cleanup } from '@testing-library/react';
  11. import matchers from '@testing-library/jest-dom/matchers';
  12. import { Form } from '../src';
  13. expect.extend(matchers);
  14. describe('Form', () => {
  15. afterEach(() => {
  16. cleanup();
  17. });
  18. it('renders a form', () => {
  19. render(<Form aria-label="Form" />);
  20. const form = screen.getByRole('form');
  21. expect(form).toBeInTheDocument();
  22. });
  23. it('calls the submit handler on submit', async () => {
  24. const onSubmit = vi.fn();
  25. render(
  26. <Form onSubmit={onSubmit} aria-label="Form">
  27. <button type="submit">Submit</button>
  28. </Form>,
  29. );
  30. const button = screen.getByRole('button', { name: 'Submit' });
  31. await userEvent.click(button);
  32. expect(onSubmit).toHaveBeenCalled();
  33. });
  34. it.skip('calls the submit handler on submit with a custom component', async () => {
  35. // TODO
  36. const onSubmit = vi.fn();
  37. render(
  38. <Form onSubmit={onSubmit} aria-label="Form">
  39. <button type="submit">Submit</button>
  40. </Form>,
  41. );
  42. const button = screen.getByRole('button', { name: 'Submit' });
  43. await userEvent.click(button);
  44. expect(onSubmit).toHaveBeenCalled();
  45. });
  46. });