테스팅할 때 중첩은 피하세요

// Login.js
import * as React from 'react';

function Login({ onSubmit }) {
  const [error, setError] = React.useState('');

  function handleSubmit(event) {
    event.preventDefault();
    const {
      usernameInput: { value: username },
      passwordInput: { value: password },
    } = event.target.elements;

    if (!username) {
      setError('username is required');
    } else if (!password) {
      setError('password is required');
    } else {
      setError('');
      onSubmit({ username, password });
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="usernameInput">Username</label>
          <input id="usernameInput" />
        </div>
        <div>
          <label htmlFor="passwordInput">Password</label>
          <input id="passwordInput" type="password" />
        </div>
        <button type="submit">Submit</button>
      </form>
      {error ? <div role="alert">{error}</div> : null}
    </div>
  );
}

export default Login;

// __tests__/Login.js
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as React from 'react';

import Login from '../login';

describe('Login', () => {
  let utils,
    handleSubmit,
    user,
    changeUsernameInput,
    changePasswordInput,
    clickSubmit;

  beforeEach(() => {
    handleSubmit = jest.fn();
    user = { username: 'michelle', password: 'smith' };
    utils = render(<Login onSubmit={handleSubmit} />);
    changeUsernameInput = value =>
      userEvent.type(utils.getByLabelText(/username/i), value);
    changePasswordInput = value =>
      userEvent.type(utils.getByLabelText(/password/i), value);
    clickSubmit = () => userEvent.click(utils.getByText(/submit/i));
  });

  describe('when username and password is provided', () => {
    beforeEach(() => {
      changeUsernameInput(user.username);
      changePasswordInput(user.password);
    });

    describe('when the submit button is clicked', () => {
      beforeEach(() => {
        clickSubmit();
      });

      it('should call onSubmit with the username and password', () => {
        expect(handleSubmit).toHaveBeenCalledTimes(1);
        expect(handleSubmit).toHaveBeenCalledWith(user);
      });
    });
  });

  describe('when the password is not provided', () => {
    beforeEach(() => {
      changeUsernameInput(user.username);
    });

    describe('when the submit button is clicked', () => {
      let errorMessage;
      beforeEach(() => {
        clickSubmit();
        errorMessage = utils.getByRole('alert');
      });

      it('should show an error message', () => {
        expect(errorMessage).toHaveTextContent(/password is required/i);
      });
    });
  });

  describe('when the username is not provided', () => {
    beforeEach(() => {
      changePasswordInput(user.password);
    });

    describe('when the submit button is clicked', () => {
      let errorMessage;
      beforeEach(() => {
        clickSubmit();
        errorMessage = utils.getByRole('alert');
      });

      it('should show an error message', () => {
        expect(errorMessage).toHaveTextContent(/username is required/i);
      });
    });
  });
});

it('should call onSubmit with the username and password', () => {
  expect(handleSubmit).toHaveBeenCalledTimes(1);
  expect(handleSubmit).toHaveBeenCalledWith(user);
});

beforeEach(() => {
  handleSubmit = jest.fn();
  user = { username: 'michelle', password: 'smith' };
  // ...
});

// __tests__/Login.js
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as React from 'react';

import Login from '../Login';

test('calls onSubmit with the username and password when submit is clicked', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText, getByText } = render(<Login onSubmit={handleSubmit} />);
  const user = { username: 'michelle', password: 'smith' };

  userEvent.type(getByLabelText(/username/i), user.username);
  userEvent.type(getByLabelText(/password/i), user.password);
  userEvent.click(getByText(/submit/i));

  expect(handleSubmit).toHaveBeenCalledTimes(1);
  expect(handleSubmit).toHaveBeenCalledWith(user);
});

test('shows an error message when submit is clicked and no username is provided', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText, getByText, getByRole } = render(
    <Login onSubmit={handleSubmit} />,
  );

  userEvent.type(getByLabelText(/password/i), 'anything');
  userEvent.click(getByText(/submit/i));

  const errorMessage = getByRole('alert');
  expect(errorMessage).toHaveTextContent(/username is required/i);
  expect(handleSubmit).not.toHaveBeenCalled();
});

test('shows an error message when submit is clicked and no password is provided', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText, getByText, getByRole } = render(
    <Login onSubmit={handleSubmit} />,
  );

  userEvent.type(getByLabelText(/username/i), 'anything');
  userEvent.click(getByText(/submit/i));

  const errorMessage = getByRole('alert');
  expect(errorMessage).toHaveTextContent(/password is required/i);
  expect(handleSubmit).not.toHaveBeenCalled();
});

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as React from 'react';

import Login from '../Login';

// 여기에 테스트 케이스들을 위해 서로 조합하여 사용되는 셋업 함수들이 있습니다.
// 같은 일을 반복하는 테스트가 많이 있는 경우에만 이러한 방식을 사용하세요.
// 여기선 예시를 위해 작성해놨지만 실제로 예시 수준의 테스트에선 이 정도의 추상화는 필요 없습니다.
// https://kentcdodds.com/blog/aha-testing 에서 더 많이 알아보세요!
function setup() {
  const handleSubmit = jest.fn();
  const utils = render(<Login onSubmit={handleSubmit} />);
  const user = { username: 'michelle', password: 'smith' };
  const changeUsernameInput = value =>
    userEvent.type(utils.getByLabelText(/username/i), value);
  const changePasswordInput = value =>
    userEvent.type(utils.getByLabelText(/password/i), value);
  const clickSubmit = () => userEvent.click(utils.getByText(/submit/i));
  return {
    ...utils,
    handleSubmit,
    user,
    changeUsernameInput,
    changePasswordInput,
    clickSubmit,
  };
}

function setupSuccessCase() {
  const utils = setup();
  utils.changeUsernameInput(utils.user.username);
  utils.changePasswordInput(utils.user.password);
  utils.clickSubmit();
  return utils;
}

function setupWithNoPassword() {
  const utils = setup();
  utils.changeUsernameInput(utils.user.username);
  utils.clickSubmit();
  const errorMessage = utils.getByRole('alert');
  return { ...utils, errorMessage };
}

function setupWithNoUsername() {
  const utils = setup();
  utils.changePasswordInput(utils.user.password);
  utils.clickSubmit();
  const errorMessage = utils.getByRole('alert');
  return { ...utils, errorMessage };
}

test('calls onSubmit with the username and password', () => {
  const { handleSubmit, user } = setupSuccessCase();
  expect(handleSubmit).toHaveBeenCalledTimes(1);
  expect(handleSubmit).toHaveBeenCalledWith(user);
});

test('shows an error message when submit is clicked and no username is provided', () => {
  const { handleSubmit, errorMessage } = setupWithNoUsername();
  expect(errorMessage).toHaveTextContent(/username is required/i);
  expect(handleSubmit).not.toHaveBeenCalled();
});

test('shows an error message when password is not provided', () => {
  const { handleSubmit, errorMessage } = setupWithNoPassword();
  expect(errorMessage).toHaveTextContent(/password is required/i);
  expect(handleSubmit).not.toHaveBeenCalled();
});

import {render} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as React from 'react';

import Login from '../Login';

test('example 1', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText } = render(<Login onSubmit={handleSubmit} />);
  userEvent.type(getByLabelText(/username/i), 'kentcdodds');
  userEvent.type(getByLabelText(/password/i), 'ilovetwix');
  // more test here
});

test('example 2', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText } = render(<Login onSubmit={handleSubmit} />);
  // 💣 여기서 `getByLabelText`가 실제로는 문서 전체를 훑어보고 있고, 이전 테스트 이후에 클린업을
  // 하지 않았기 때문에 RTL에서 label이 "username"인 입력 필드를 하나 이상 찾았다는 에러 메시지를
  // 띄울 것입니다.
  userEvent.type(getByLabelText(/username/i), 'kentcdodds');
  // more test here
});

test('example 1', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText } = render(<Login onSubmit={handleSubmit} />);
  userEvent.type(getByLabelText(/username/i), 'kentcdodds');
  // 💣 아래의 오타로 인해 다음의 에러가 발생하게 됩니다:
  //   "no field with the label matching passssword"
  userEvent.type(getByLabelText(/passssword/i), 'ilovetwix');
  // more test here
  cleanup();
});

import { cleanup, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as React from 'react';

import Login from '../Login'

afterEach(() => cleanup());

test('example 1', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText } = render(<Login onSubmit={handleSubmit} />);
  userEvent.type(getByLabelText(/username/i), 'kentcdodds');
  userEvent.type(getByLabelText(/password/i), 'ilovetwix');
  // more test here
});

test('example 2', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText } = render(<Login onSubmit={handleSubmit} />);
  userEvent.type(getByLabelText(/username/i), 'kentcdodds');
  // more test here
});

let server;
beforeAll(async () => {
  server = await startServer();
});
afterAll(() => server.close());

beforeAll(() => {
  jest.spyOn(console, 'error').mockImplementation(() => {});
});

afterEach(() => {
  console.error.mockClear();
});

afterAll(() => {
  console.error.mockRestore();
});