langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-23 04:55:28 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #29711] refactor: create shared react-i18next mock to reduce duplication #32525

New Issue
Closed
opened 2026-02-21 20:51:34 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:51:34 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/29711

State: closed
Merged: Yes

Summary

This PR creates a shared mock for react-i18next to eliminate code duplication across 36+ test files. Jest automatically loads this shared mock, so individual test files no longer need to declare the same inline mock.

Changes

✅ New Shared Mock

  • File: web/__mocks__/react-i18next.ts
  • Behavior: Returns translation keys as-is (most common case)
  • Auto-loading: Jest automatically uses this for all tests

✅ Removed Duplicate Mocks

  • 36 test files no longer have inline jest.mock('react-i18next')
  • Reduced code duplication by ~180+ lines
  • All tests continue to pass (1,878 tests, 146 suites)

✅ Preserved Custom Logic

  • 7 test files keep custom mocks with specific translations
  • Examples: time picker, input components, confirmation dialogs
  • Custom mocks properly override the shared mock when needed

✅ Updated Documentation

  • web/testing/testing.md - Updated i18n section
  • .claude/skills/frontend-testing/guides/mocking.md - New guidance
  • .claude/skills/frontend-testing/SKILL.md - Added reference
  • .claude/skills/frontend-testing/CHECKLIST.md - Updated checklist

Usage

Standard Case (no code needed)

// Jest automatically loads the shared mock
describe('MyComponent', () => {
  it('should render', () => {
    render(<MyComponent />)
    expect(screen.getByText('some.translation.key')).toBeInTheDocument()
  })
})

Custom Translations (override when needed)

jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const translations = {
        'my.key': 'Custom translation',
      }
      return translations[key] || key
    },
  }),
}))

Test Results

Test Suites: 146 passed, 146 total
Tests:       1,878 passed, 1,878 total
Time:        11.371 s

All tests pass without any failures.

Benefits

  1. Reduced duplication: Eliminated ~180+ lines of duplicate mock code
  2. Centralized configuration: Single place to update i18n mock behavior
  3. Easier maintenance: Changes to i18n mock only need to be made in one place
  4. Cleaner test files: Test files focus on actual test logic rather than boilerplate
  5. Backward compatible: Custom mocks still work when needed

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • Refactor (non-breaking change that improves code quality)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings
**Original Pull Request:** https://github.com/langgenius/dify/pull/29711 **State:** closed **Merged:** Yes --- ## Summary This PR creates a shared mock for `react-i18next` to eliminate code duplication across 36+ test files. Jest automatically loads this shared mock, so individual test files no longer need to declare the same inline mock. ## Changes ### ✅ New Shared Mock - **File**: `web/__mocks__/react-i18next.ts` - **Behavior**: Returns translation keys as-is (most common case) - **Auto-loading**: Jest automatically uses this for all tests ### ✅ Removed Duplicate Mocks - **36 test files** no longer have inline `jest.mock('react-i18next')` - Reduced code duplication by ~180+ lines - All tests continue to pass (1,878 tests, 146 suites) ### ✅ Preserved Custom Logic - **7 test files** keep custom mocks with specific translations - Examples: time picker, input components, confirmation dialogs - Custom mocks properly override the shared mock when needed ### ✅ Updated Documentation - `web/testing/testing.md` - Updated i18n section - `.claude/skills/frontend-testing/guides/mocking.md` - New guidance - `.claude/skills/frontend-testing/SKILL.md` - Added reference - `.claude/skills/frontend-testing/CHECKLIST.md` - Updated checklist ## Usage ### Standard Case (no code needed) ```typescript // Jest automatically loads the shared mock describe('MyComponent', () => { it('should render', () => { render(<MyComponent />) expect(screen.getByText('some.translation.key')).toBeInTheDocument() }) }) ``` ### Custom Translations (override when needed) ```typescript jest.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => { const translations = { 'my.key': 'Custom translation', } return translations[key] || key }, }), })) ``` ## Test Results ```bash Test Suites: 146 passed, 146 total Tests: 1,878 passed, 1,878 total Time: 11.371 s ``` All tests pass without any failures. ## Benefits 1. **Reduced duplication**: Eliminated ~180+ lines of duplicate mock code 2. **Centralized configuration**: Single place to update i18n mock behavior 3. **Easier maintenance**: Changes to i18n mock only need to be made in one place 4. **Cleaner test files**: Test files focus on actual test logic rather than boilerplate 5. **Backward compatible**: Custom mocks still work when needed ## Type of Change - [ ] Bug fix (non-breaking change that fixes an issue) - [x] Refactor (non-breaking change that improves code quality) - [ ] New feature (non-breaking change that adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update ## Checklist - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules - [ ] I have checked my code and corrected any misspellings
yindo added the pull-request label 2026-02-21 20:51:34 -05:00
yindo closed this issue 2026-02-21 20:51:34 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#32525
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?