Eigen Testing Skill

Use this skill to write high-quality tests for Eigen following established patterns and best practices.

Quick Start

For Non-Relay Components

Use the template at assets/component-test-template.tsx as a starting point:

import { fireEvent, screen } from "@testing-library/react-native"
import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"

For Relay Components

Use the template at assets/relay-test-template.tsx as a starting point:

import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
import { graphql } from "react-relay"

Critical Rules

1. •File Location: Always place tests in __tests__ directories colocated with source files
2. •File Naming: Use .tests.tsx (not .test.tsx or .spec.tsx)
3. •Never Use Deprecated Utilities: Avoid renderWithWrappersLEGACY, setupTestWrapper_LEGACY, resolveMostRecentRelayOperation, flushPromiseQueue, waitUntil, extractText, renderWithLayout
4. •Analytics Testing: Always use toMatchInlineSnapshot() pattern for tracking events
5. •Async Operations: Use findBy* queries, not waitUntil or promise flushing

Test Structure Pattern

Follow Arrange-Act-Assert:

describe("ComponentName", () => {
  it("does something specific", () => {
    // Arrange: Set up and render
    renderWithWrappers(<Component />)

    // Act: Trigger behavior
    fireEvent.press(screen.getByTestId("button-id"))

    // Assert: Verify outcome
    expect(mockNavigate).toHaveBeenCalledWith("/path")
  })
})

Common Patterns

Testing Navigation

import { navigate } from "app/system/navigation/navigate"

expect(navigate).toHaveBeenCalledWith("/artwork/artwork-slug")

Testing Analytics

import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"

expect(mockTrackEvent).toHaveBeenCalledTimes(1)
expect(mockTrackEvent.mock.calls[0]).toMatchInlineSnapshot()
// Run test to generate snapshot, then verify it's correct

Testing Relay Data

renderWithRelay({
  Me: () => ({
    name: "John Doe",
    artworks: {
      edges: mockEdges(10), // Use mockEdges for paginated data
    },
  }),
})

Testing Error States

const { mockRejectLastOperation } = renderWithRelay()
mockRejectLastOperation(new Error("Network error"))

Detailed Guidelines

For comprehensive testing patterns, utilities, and examples, refer to:

• •references/testing-guidelines.md - Complete testing documentation

Read this file when you need:

• •Detailed examples of testing patterns
• •Information about wrapper props and configuration
• •Guidance on what to test and what not to test
• •Mock helpers and utilities
• •Additional resources and links

TestID Conventions

Use descriptive, kebab-case test IDs:

• •artwork-save-button
• •artist-series-list-item
• •price-display-container

Running Tests

yarn test                                    # Run all tests
yarn test:watch                              # Watch mode
yarn test path/to/file.tests.tsx             # Test specific file