JavaScript 테스트코드 문법 소개

it (또는 test)

• 실제 테스트 코드를 작성하는 함수
• 하나의 테스트 케이스를 작성하는 곳
• 테스트 코드가 어떤 역할을 하는지 작성하는 곳
• 테스트 명을 문장으로 작성해서 하나의 문장이 되는 형식

it('should render username and password input fields', () => {
    const { getByPlaceholderText } = render(<Login />);
    
    const usernameInput = getByPlaceholderText('Username');
    const passwordInput = getByPlaceholderText('Password');

    expect(usernameInput).toBeInTheDocument();
    expect(passwordInput).toBeInTheDocument();
  });

test('계정 정보를 입력할 수 있는 input들이 화면에 나타난다', () => {
    const { getByPlaceholderText } = render(<Login />);
    
    const usernameInput = getByPlaceholderText('Username');
    const passwordInput = getByPlaceholderText('Password');

    expect(usernameInput).toBeInTheDocument();
    expect(passwordInput).toBeInTheDocument();
  });

describe

• it이나 test들의 묶음
• 관련있는 테스트들을 하나로 묶는 것 - 응집도를 높일 수 있음

describe('Login Component', () => {
  it('should render username and password input fields', () => {
    const { getByPlaceholderText } = render(<Login />);
    
    const usernameInput = getByPlaceholderText('Username');
    const passwordInput = getByPlaceholderText('Password');

    expect(usernameInput).toBeInTheDocument();
    expect(passwordInput).toBeInTheDocument();
  });

  it('should call authenticateUser service with entered credentials on login button click', async () => {
    mockAuthenticateUser.mockResolvedValue({ success: true });

    const { getByPlaceholderText, getByText } = render(<Login />);

    const usernameInput = getByPlaceholderText('Username');
    const passwordInput = getByPlaceholderText('Password');
    const loginButton = getByText('Login');

    fireEvent.change(usernameInput, { target: { value: 'testuser' } });
    fireEvent.change(passwordInput, { target: { value: 'testpass' } });
    fireEvent.click(loginButton);

    expect(mockAuthenticateUser).toHaveBeenCalledWith('testuser', 'testpass');
  });

  it('should display an error message if login attempt fails', async () => {
    mockAuthenticateUser.mockRejectedValue(invalidCredentialsError);

    const { getByPlaceholderText, getByText } = render(<Login />);

    const usernameInput = getByPlaceholderText('Username');
    const passwordInput = getByPlaceholderText('Password');
    const loginButton = getByText('Login');

    fireEvent.change(usernameInput, { target: { value: 'wronguser' } });
    fireEvent.change(passwordInput, { target: { value: 'wrongpass' } });
    fireEvent.click(loginButton);

    // Assuming the component displays the error message from the caught error
		const invalidCredentialsError = new Error('Invalid credentials');
    const errorMessage = await getByText(invalidCredentialsError.message);

    expect(errorMessage).toBeInTheDocument();
  });

});

beforeEach

• describe block안에 있는 각각의 it 의 작동 전에 동작하는 함수
• 테스트 환경이나 테스트 케이스를 설정하는데 좋음

const mockFetchUser = jest.fn();

jest.mock('./apiService', () => ({
  fetchUser: mockFetchUser
}));

describe('UserProfile Component', () => {

  // This runs before each individual test.
  beforeEach(() => {
    mockFetchUser.mockClear();
    mockFetchUser.mockResolvedValue(user);
  });

beforeAll

• 각 describe 전에 작동되는 함수
• 테스트들이 공통으로 사용하는 configuration이나 상수들을 선언하는데 활용됨

describe('UserProfile Component', () => {
  let user;

  // This runs once for this suite, before any tests are executed.
  beforeAll(() => {
    user = {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com'
    };
  });

afterEach

• describe block안에 있는 각각의 it 의 작동 후에 동작하는 함수
• configuration을 초기화 한다거나, mock data를 clean up 할 때 사용

afterAll

• 각 describe 후에 작동되는 함수
• 여러개의 describe에 공통으로 사용되는 것들을 초기화 하는데 좋음

  afterAll(() => {
    user = null;
  });

이를 활용해서 given, when, then로 테스트 코드 작성을 표현하는 방식도 활용한다.

Given

테스트를 준비하는 단계이다.테스트에 사용하는 변수, 입력 값등을 지정해주는 단계이다.

When

실제로 액션을 하는 테스를 진행하는 단계이다. 즉 Service단계의 메서드를 호출하는등의 행동을 하는 부분이라고 생각할 수있다.

Then

테스트를 검증하는 단계이다. 예상한 값, 실제 행동을 통해서 나온 값을 검증한다.