📋 Organizing Jest Tests

Best practices for organizing tests.

File Structure

src/
  Button.js
  Button.test.js        (Next to component)
  
  __tests__/
    Button.test.js      (Alternative structure)

Using describe()

describe('Button Component', () => {
  describe('rendering', () => {
    test('renders with text', () => {});
    test('renders with icon', () => {});
  });

  describe('interactions', () => {
    test('handles click', () => {});
  });
});

Setup and Teardown

describe('UserProfile', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  afterEach(() => {
    cleanup();
  });

  test('test 1', () => {});
});

Skipping and Focusing

test.skip('not ready', () => {});
test.only('focus on this', () => {});
describe.skip('skip group', () => {});

✅ Key Takeaways

• Keep tests **next to components**

• Use **describe()** to group tests

• Use **beforeEach/afterEach** for setup

• Follow **Arrange-Act-Assert** pattern

• Use **test.only** for debugging