Jest测试中覆盖环境变量后组件未按预期渲染问题排查

问题背景 #

有一个React组件ProfileMenu，通过process.env.PERSONAL_SITE和IS_FEATURE_ENABLED控制不同链接的渲染逻辑。jest.config.js默认将这两个变量设为false，但测试用例中把PERSONAL_SITE改为'true'后，控制台打印显示变量已变更，组件却未渲染预期的'Test 3'链接，测试失败。

相关代码 #

组件代码 #

const isPersonalSite: boolean = process.env.PERSONAL_SITE === 'true';
const isFeatureEnabled: boolean = process.env.IS_FEATURE_ENABLED === 'true';

export const ProfileMenu = () => {
    console.log('PERSONAL_SITE component', process.env.PERSONAL_SITE)
    return (
        <>
            {!isPersonalSite && isFeatureEnabled &&
                <a href="http://test.com">Test 1</a>
            }

            {!isPersonalSite && !isFeatureEnabled &&
                <a href="http://test2.com">Test 2</a>
            }

            {isPersonalSite &&
                <a href="http://test3.com">Test 3</a>
            }

            <a href="/logout">Logout</a>
        </>
    )
}

jest.config.js配置 #

process.env = Object.assign(process.env, {
    PERSONAL_SITE: false,
    IS_FEATURE_ENABLED: false
});

测试代码 #

describe("ProfileDropDownMenu", () => {
    const env = process.env

    beforeEach(() => {
        jest.resetModules()
        process.env = { ...env }
    })
    
    afterEach(() => {
        process.env = env
    })
    
    it('render the menu', () => {
        process.env.PERSONAL_SITE = 'true'

        console.log('PERSONAL_SITE test', process.env.PERSONAL_SITE)
        
        render(
            <ProfileMenu />
        )
        
        expect(screen.getByText('Test 3')).toBeInTheDocument();
        expect(screen.getByText('Logout')).toBeInTheDocument();
    })
})

问题原因 #

• 模块级变量提前固化：组件中的isPersonalSite和isFeatureEnabled是在模块加载阶段就计算完成的常量，并非组件渲染时动态读取process.env。测试用例修改process.env的时机是在组件已经被导入之后，此时这两个变量的值已经固定为模块加载时的初始值（false），后续修改环境变量不会改变它们。
• 模块缓存未生效重置：即使测试中调用了jest.resetModules()，如果测试文件顶部是静态导入ProfileMenu，模块会在测试执行前就被加载缓存，修改环境变量后不会重新加载模块，自然不会重新计算变量值。

解决办法 #

方案1：将环境变量读取移到组件内部（推荐） #

把变量计算逻辑放到组件函数内部，每次渲染时动态读取process.env，确保每次渲染都能拿到最新的环境变量值：

export const ProfileMenu = () => {
    // 移到组件内部，每次渲染时重新计算
    const isPersonalSite: boolean = process.env.PERSONAL_SITE === 'true';
    const isFeatureEnabled: boolean = process.env.IS_FEATURE_ENABLED === 'true';
    
    console.log('PERSONAL_SITE component', process.env.PERSONAL_SITE)
    return (
        <>
            {!isPersonalSite && isFeatureEnabled &&
                <a href="http://test.com">Test 1</a>
            }

            {!isPersonalSite && !isFeatureEnabled &&
                <a href="http://test2.com">Test 2</a>
            }

            {isPersonalSite &&
                <a href="http://test3.com">Test 3</a>
            }

            <a href="/logout">Logout</a>
        </>
    )
}

方案2：测试中动态导入组件 #

去掉测试文件顶部的静态导入，在修改process.env之后，用require动态导入组件，确保模块是在环境变量修改后才加载：

describe("ProfileDropDownMenu", () => {
    const env = process.env

    beforeEach(() => {
        jest.resetModules()
        process.env = { ...env }
    })
    
    afterEach(() => {
        process.env = env
    })
    
    it('render the menu', () => {
        process.env.PERSONAL_SITE = 'true'

        console.log('PERSONAL_SITE test', process.env.PERSONAL_SITE)
        
        // 动态导入组件
        const { ProfileMenu } = require('./ProfileMenu');
        
        render(
            <ProfileMenu />
        )
        
        expect(screen.getByText('Test 3')).toBeInTheDocument();
        expect(screen.getByText('Logout')).toBeInTheDocument();
    })
})

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