src/
├── components/
│   ├── Button.js
│   ├── Header.js
├── utils/
│   ├── helpers.js
tests/
├── components/
│   ├── Button.test.js
│   ├── Header.test.js
├── utils/
│   ├── helpers.test.js

test('설명 문구', () => {
  // 테스트 코드
});
 
// 또는
it('설명 문구', () => {
  // 테스트 코드
});

describe('Math operations', () => {
  it('adds 1 + 2 to equal 3', () => {
    expect(1 + 2).toBe(3);
  });
 
  it('subtracts 2 - 1 to equal 1', () => {
    expect(2 - 1).toBe(1);
  });
 
  it('multiplies 2 * 3 to equal 6', () => {
    expect(2 * 3).toBe(6);
  });
});

test('1 + 1은 2입니다.', () => {
  expect(1 + 1).toBe(2);
});
 
test('객체 값 비교', () => {
  const data = { one: 1 };
  data['two'] = 2;
  expect(data).toEqual({ one: 1, two: 2 });
});

test('비동기 async/await 테스트', async () => {
  function fetchData() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('peanut butter');
      }, 1000);
    });
  }
 
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

const forEach = require('./forEach');
 
const mockCallback = jest.fn((x) => 42 + x);
 
test('forEach mock function', () => {
  forEach([0, 1], mockCallback);
 
  // The mock function was called twice
  expect(mockCallback.mock.calls).toHaveLength(2);
 
  // The first argument of the first call to the function was 0
  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
  // The first argument of the second call to the function was 1
  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
  // The return value of the first call to the function was 42
  expect(mockCallback.mock.results[0].value).toBe(42);
});

const forEach = require('./forEach');
 
const mockCallback = jest.fn((x) => 42 + x);
 
test('forEach mock function', () => {
  forEach([0, 1], mockCallback);
 
  // The mock function was called twice
  expect(mockCallback.mock.calls).toHaveLength(2);
 
  // The first argument of the first call to the function was 0
  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
  // The first argument of the second call to the function was 1
  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
  // The return value of the first call to the function was 42
  expect(mockCallback.mock.results[0].value).toBe(42);
});

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
 
test('MyComponent Snapshot 테스트', () => {
  const { asFragment } = render(<MyComponent />);
  expect(asFragment()).toMatchSnapshot();
});

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
 
test('MyComponent 테스트', () => {
  const { getByText } = render(<MyComponent />);
  expect(getByText('Hello, World!')).toBeInTheDocument();
});

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
 
test('MyComponent 테스트', () => {
  render(<MyComponent />);
  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

import React from 'react';
 
const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;
 
export default Greeting;

import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';
 
test('renders greeting with name', () => {
  render(<Greeting name='John' />);
  expect(screen.getByText('Hello, John!')).toBeInTheDocument();
});

import React from 'react';
 
const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);
 
export default Button;

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
 
test('calls onClick when button is clicked', () => {
  const handleClick = jest.fn();
  render(<Button label='Click me' onClick={handleClick} />);
  fireEvent.click(screen.getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

import React, { useEffect, useState } from 'react';
 
const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
    };
    fetchUser();
  }, [userId]);
 
  if (!user) return <div>Loading...</div>;
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};
 
export default UserProfile;

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import UserProfile from './UserProfile';
 
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () =>
      Promise.resolve({ name: 'John Doe', email: 'john@example.com' }),
  }),
);
 
test('loads and displays user data', async () => {
  render(<UserProfile userId='1' />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  await waitFor(() => expect(screen.getByText('John Doe')).toBeInTheDocument());
  expect(screen.getByText('john@example.com')).toBeInTheDocument();
});

import React, { useState } from 'react';
 
const LoginForm = ({ onSubmit }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
 
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ username, password });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type='text'
        placeholder='Username'
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type='password'
        placeholder='Password'
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type='submit'>Login</button>
    </form>
  );
};
 
export default LoginForm;

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import LoginForm from './LoginForm';
 
test('submits username and password', () => {
  const handleSubmit = jest.fn();
  render(<LoginForm onSubmit={handleSubmit} />);
 
  fireEvent.change(screen.getByPlaceholderText('Username'), {
    target: { value: 'testuser' },
  });
  fireEvent.change(screen.getByPlaceholderText('Password'), {
    target: { value: 'password' },
  });
  fireEvent.click(screen.getByText('Login'));
 
  expect(handleSubmit).toHaveBeenCalledWith({
    username: 'testuser',
    password: 'password',
  });
});