使用react-i18next的Storybook交互测试在CI中失败

本地环境下，直接运行或构建Storybook后启动服务执行测试，所有用例均通过；但提交代码至GitHub后，测试报错：测试尝试查找名称为"Главная"（俄语“主页”）的链接元素，实际页面显示的是英文"Main"。从失败日志可见，react-i18next加载了俄语和英语翻译文件，但CI环境中页面使用英语翻译，导致测试不匹配。

GitHub Actions工作流代码 #

name: Linting and Testing
on:
    push:
        branches: [ master ]
    pull_request:
        branches: [ master ]
jobs:
    lint:
        runs-on: ubuntu-latest
        strategy:
            matrix:
                node-version: [16.x]
        steps:
            - uses: actions/checkout@v3
            - name: Set up Node.js ${{ matrix.node-version }}
              uses: actions/setup-node@v3
              with:
                  node-version: ${{ matrix.node-version }}
            - name: install dependencies
              run: npm ci
            - name: build project (production)
              run: npm run build:prod
            - name: check eslint rules
              run: npm run eslint
            - name: check stylelint rules
              run: npm run stylelint
            - name: check prettier rules
              run: npm run prettier:check
    test:
        runs-on: ubuntu-latest
        strategy:
            matrix:
                node-version: [16.x]
        steps:
            - uses: actions/checkout@v3
            - name: Starting Node.js ${{ matrix.node-version }}
              uses: actions/setup-node@v3
              with:
                  node-version: ${{ matrix.node-version }}
            - name: install dependencies
              run: npm ci
            - name: build Storybook
              run: npm run build-storybook --quiet
            - name: serve Storybook and run tests
              run: |
                npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
                  "npx http-server storybook-static --port 6006 --silent" \
                  "npx wait-on tcp:6006 && npm run test-storybook"

失败日志 #

[TEST] FAIL browser: chromium src/widgets/NavBar/ui/NavBar.stories.ts
[TEST]   widget/NavBar
[TEST]     Normal
[TEST]       ✕ play-test (306 ms)
[TEST]     Collapsed
[TEST]       ✓ play-test (175 ms)
[TEST]     Active
[TEST]       ✕ play-test (82 ms)
[TEST] 
[TEST]   ● widget/NavBar › Normal › play-test
[TEST] 
[TEST]     page.evaluate: StorybookTestRunnerError: 
[TEST]     An error occurred in the following story. Access the link for full output:
[TEST]     http://127.0.0.1:6006/?path=/story/widget-navbar--normal&addonPanel=storybook/interactions/panel
[TEST] 
[TEST]     Message:
[TEST]      Unable to find an accessible element with the role "link" and name "Главная"
[TEST] 
[TEST]     Here are the accessible roles:
[TEST] 
[TEST]       navigation:
[TEST] 
[TEST]       Name "":
[TEST]       <nav
[TEST]         class="src-widgets-NavBar-ui-NavBar-module__navBar"
[TEST]         data-testid="navbar"
[TEST]       />
[TEST] 
[TEST]       --------------------------------------------------
[TEST]       list:
[TEST] 
[TEST]       Name "":
[TEST]       <ul />
[TEST] 
[TEST]       --------------------------------------------------
[TEST]       listitem:
[TEST] 
[TEST]       Name "":
[TEST]       <li
[TEST]         class="src-widgets-NavBar-ui-NavBar-module__list"
[TEST]         data-testid="main"
[TEST]       />
[TEST] 
[TEST]       Name "":
[TEST]       <li
[TEST]         class="src-widgets-NavBar-ui-NavBar-module__list"
[TEST]         data-testid="about"
[TEST]       />
[TEST] 
[TEST]       --------------------------------------------------
[TEST]       link:
[TEST] 
[TEST]       Name "Main":
[TEST]       <a
[TEST]         aria-label=""
[TEST]         href="/"
[TEST]       />
[TEST] 
[TEST]       Name "About":
[TEST]       <a
[TEST]         aria-label=""
[TEST]         href="/about"
[TEST]       />
[TEST] 
[TEST]       --------------------------------------------------
[TEST] 
[TEST]     Ignored nodes: comments, script, style
[TEST]     <div
[TEST]       id="storybook-root"
[TEST]     >
[TEST]       <div
[TEST]         class="app light"
[TEST]       >
[TEST]         <nav
[TEST]           class="src-widgets-NavBar-ui-NavBar-module__navBar"
[TEST]           data-testi...
[TEST] 
[TEST] 
[TEST]     --------------------------------------------------
[TEST] 
[TEST]     Browser logs:
[TEST] 
[TEST]     warn: i18next::backendConnector: loading namespace main for language en-US failed, failed loading /locales/en-US/main.json; status code: 404
[TEST] 
[TEST]     warn: i18next::backendConnector: loading namespace about for language en-US failed, failed loading /locales/en-US/about.json; status code: 404
[TEST] 
[TEST]     log: i18next::backendConnector: loaded namespace main for language en, {"Главная":"Main"}
[TEST] 
[TEST]     log: i18next::backendConnector: loaded namespace about for language en, {"О сайте":"About"}
[TEST] 
[TEST]     log: i18next::backendConnector: loaded namespace main for language ru, {"Главная":"Главная"}
[TEST] 
[TEST]     log: i18next::backendConnector: loaded namespace about for language ru, {"О сайте":"О сайте"}
[TEST] 
[TEST]     error: {"name":"TestingLibraryElementError"}
[TEST] 
[TEST]       at Object.<anonymous> (<anonymous>:272:13)
[TEST]       at http:/127.0.0.1:6006/sb-preview/runtime.js:4:92863
[TEST]           at Array.forEach (<anonymous>)
[TEST]       at Channel.handleEvent (http:/127.0.0.1:6006/sb-preview/runtime.js:4:92847)
[TEST]       at handler (http:/127.0.0.1:6006/sb-preview/runtime.js:4:91935)
[TEST]       at Channel.emit (http:/127.0.0.1:6006/sb-preview/runtime.js:4:91990)
[TEST]       at http:/127.0.0.1:6006/sb-preview/runtime.js:74:11343
[TEST]       at StoryRender.runPhase (http:/127.0.0.1:6006/sb-preview/runtime.js:74:8770)
[TEST]       at StoryRender.render (http:/127.0.0.1:6006/sb-preview/runtime.js:74:11289)
[TEST]       at src/widgets/NavBar/ui/NavBar.stories.ts:168:58
[TEST]       at step (src/widgets/NavBar/ui/NavBar.stories.ts:109:23)
[TEST]       at Object.next (src/widgets/NavBar/ui/NavBar.stories.ts:50:20)
[TEST]       at asyncGeneratorStep (src/widgets/NavBar/ui/NavBar.stories.ts:4:28)
[TEST]       at _next (src/widgets/NavBar/ui/NavBar.stories.ts:22:17)

问题原因 #

• 系统语言差异导致i18next默认语言不同：本地环境系统语言为俄语，i18next自动识别并切换到俄语翻译；而GitHub Actions的Ubuntu runner默认系统语言是英语（en-US），i18next优先使用英语作为默认语言，导致页面渲染英文文本，与测试用例中查找俄语文本的逻辑不匹配。
• i18next fallback逻辑触发：日志显示i18next尝试加载en-US翻译文件失败（404），随后降级加载en翻译文件并生效，进一步确认CI环境使用英语作为当前语言。
• 测试用例未固定语言环境：测试代码未强制指定i18next使用俄语，而是依赖系统环境的语言设置，导致本地和CI环境的测试上下文不一致。

内容的提问来源于stack exchange，提问作者rgdzv