Skip to main content
Ensure code quality and consistency by following these testing and linting practices.

​
Linting

​
Running ESLint

Check for linting errors: 
npm run lint
Automatically fix linting issues: 
npm run lint:fix
All pull requests must have zero ESLint errors before they can be merged

​
ESLint Configuration

The project uses a comprehensive ESLint setup defined in .eslintrc.js:

​
Extends

  • expo - Expo-specific linting rules
  • prettier - Ensures code formatting consistency

​
Plugins

  • prettier - Enforces Prettier formatting rules
  • import - Manages import/export statements
  • react-compiler - Validates React Compiler compatibility

​
Key Rules

Severity: ErrorEnforces Prettier code formatting. Any formatting violations will cause the linter to fail.
# Auto-fix formatting issues
npm run lint:fix
Severity: ErrorValidates that code is compatible with the React Compiler. This ensures optimal performance and prevents runtime issues.
Severity: ErrorEnforces sorted imports within each import statement:
// Correct
import { Button, Text, View } from 'react-native';

// Incorrect
import { View, Button, Text } from 'react-native';
Options:
  • ignoreCase: true - Case-insensitive sorting
  • ignoreDeclarationSort: true - Doesn’t sort import declarations
Severity: ErrorEnforces a specific order for import statements:
  1. External/Builtin - React, React Native, and third-party packages
  2. Internal - @src/** imports
  3. Sibling/Parent - Relative imports from parent or sibling directories
  4. Index - Index file imports
Special path groups:
  • React and React Native always come first
  • @src/** imports are grouped as internal
Options:
  • Newlines between groups are required
  • Alphabetically sorted (case-insensitive)

​
Prettier Configuration

Code formatting is handled by Prettier. Configuration is defined in the project root. Common formatting rules:
  • Single quotes for strings
  • 2-space indentation
  • Trailing commas
  • Semicolons required

​
Pre-commit Hooks

The project uses Husky and lint-staged to enforce code quality before commits.

​
Automated Checks

When you run git commit, the following happens automatically:
1

Pre-commit hook runs

Located in .husky/pre-commit, this hook runs lint-staged on all staged files.
2

Prettier formats code

All staged **/*.{js,jsx,ts,tsx} files are formatted:
npx prettier --write
3

ESLint fixes issues

ESLint attempts to auto-fix linting errors:
npx eslint --fix
4

Commit-msg validation

Located in .husky/commit-msg, this hook validates your commit message format using commitlint.
If any hook fails, the commit will be aborted. Fix the issues and try again.

​
Bypassing Hooks

Only bypass hooks if absolutely necessary (e.g., emergency hotfixes). This is strongly discouraged.
git commit --no-verify -m "emergency fix"

​
Testing

​
Test Framework

The project uses Jest with jest-expo preset for testing.

​
Running Tests

Run tests in watch mode: 
npm test
This starts Jest in watch mode, re-running tests when files change.

​
Test Structure

Tests should be co-located with the code they test: 
src/
  components/
    Button/
      Button.tsx
      Button.test.tsx
  utils/
    formatDate.ts
    formatDate.test.ts

​
Writing Tests

Example test structure: 
import { render, fireEvent } from '@testing-library/react-native';

import { Button } from './Button';

describe('Button', () => {
  it('renders correctly', () => {
    const { getByText } = render(<Button title="Click me" />);
    expect(getByText('Click me')).toBeTruthy();
  });

  it('calls onPress when clicked', () => {
    const onPressMock = jest.fn();
    const { getByText } = render(
      <Button title="Click me" onPress={onPressMock} />
    );
    
    fireEvent.press(getByText('Click me'));
    expect(onPressMock).toHaveBeenCalledTimes(1);
  });
});

​
Code Quality Tools

​
Expo Doctor

Diagnose issues with your Expo project: 
npm run doctor
This checks for:
  • Dependency version compatibility
  • Configuration issues
  • Common setup problems

​
React Compiler Health Check

Verify React Compiler compatibility: 
npm run react-compiler-check
This analyzes your codebase for patterns that may not work well with the React Compiler.

​
Bundle Analysis

Analyze bundle size and composition: 
npm run start:atlas
Expo Atlas provides insights into:
  • Bundle size by module
  • Dependency tree
  • Performance bottlenecks

​
React Scan

Monitor component re-renders during development: 
npm run scan
This helps identify:
  • Unnecessary re-renders
  • Performance issues
  • Optimization opportunities

​
Continuous Integration

The project uses GitHub Actions for CI/CD:

​
CodeQL Analysis

Automated security scanning runs on:
  • Push to main branch
  • Pull requests
  • Weekly schedule

​
Quality Checks

The project is monitored by:
  • Codacy - Code quality analysis
  • CodeQL - Security vulnerability scanning

​
Best Practices

​
Before Committing

​
Before Submitting PR

​
Troubleshooting

​
ESLint Errors Won’t Fix

If npm run lint:fix doesn’t resolve all issues:
  1. Check the specific error message
  2. Some rules can’t be auto-fixed and require manual changes
  3. Ensure you’re not violating React Compiler rules

​
Commit Hook Failures

If pre-commit hooks fail:
  1. Read the error message carefully
  2. Run npm run lint:fix manually
  3. Stage the auto-fixed files: git add .
  4. Try committing again

​
Test Failures

If tests fail:
  1. Run tests in watch mode: npm test
  2. Check for async issues or missing mocks
  3. Ensure test environment is set up correctly
  4. Clear Jest cache if needed: npx jest --clearCache

​
Additional Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us