Jest/React/Mobx：TypeError mobxReact.observer 不是函数

Posted 2023-02-22

【中文标题】Jest/React/Mobx：TypeError mobxReact.observer 不是函数

【英文标题】：Jest/React/Mobx: TypeError mobxReact.observer is not a function

【发布时间】：2021-03-24 11:07:09

【问题描述】：

我正在尝试针对 React/Mobx 代码运行一个简单的 Jest 测试，该代码仅渲染一个路由并检查它是否被渲染。我不使用类和 Mobx 装饰器。我在使用 Mobx observer 函数包装组件的每个地方都收到错误消息：

const MyComp: React.FC = observer(() => ...)

我的笑话配置：

module.exports = 
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
    ],
    "roots": ['<rootDir>'],
    "modulePaths": ['<rootDir>'],
    "moduleDirectories": [
        ".",
        "src",
        "node_modules"
    ],
    "setupFiles": [
        "raf/polyfill",
        "<rootDir>/jest.setup.js"
    ],
    "snapshotSerializers": [
        "enzyme-to-json/serializer"
    ],
    "testPathIgnorePatterns": [
        "<rootDir>/node_modules/"
    ],
    "transform": 
        "\\.(ts|tsx)$": "ts-jest",
        "\\.js$": "babel-jest",
        '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|mp4)$': 'jest-transform-stub',
        '^.+\\svg': 'jest-svg-transformer',
        '^.+\\inline.svg': 'jest-svg-transformer'
    ,

    "moduleNameMapper": 
        "mobx": "<rootDir>/node_modules/mobx",
        '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|mp4|woff2)$': 'jest-transform-stub',
        '^.+\\svg': 'jest-svg-transformer',
        '^.+\\inline.svg': 'jest-svg-transformer'
    ,

    "coverageReporters": [
        "html", "text"
    ]

我的测试用例：

describe('General:', () => 
    test('landing page renders ok', async () => 
        render((
            <ThemeProvider theme= theme >
                 renderRoutes(routes) 
            </ThemeProvider>
        ),  wrapper: BrowserRouter );
        await screen.findByText('Correct text here')
    )
);

我尝试保持一切不变，只是从组件中删除了 mobx observer 包装器，并且在完全相同的设置下一切正常。

mobx：6.4.0 mobx 反应：7.5.0 开玩笑：26.6.3

【参考方案1】：

Jest documentation about moduleNameMapper states that:

注意：如果您提供没有边界的模块名称^$，可能会导致难以发现错误。例如。 relay 将替换所有模块 在其名称中包含 relay 作为子字符串：relay、react-relay 和 graphql-relay 将全部指向您的存根。

您的moduleNameMapper 中有mobx，它将同时排除mobx 和mobx-react，这不是您想要的。您应该能够通过删除它来摆脱错误。