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

Question

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

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

我的 Jest 配置：

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

Answer 1

Jest documentation about moduleNameMapper states that:

Note: If you provide module name without boundaries ^$ it may cause hard to spot errors. E.g. relay will replace all modules which contain relay as a substring in its name: relay, react-relay and graphql-relay will all be pointed to your stub.

您的 moduleNameMapper 中有 mobx，这将同时删除 mobx 和 mobx-react，这不是您想要的。您应该可以通过删除它来消除错误。

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

Jest/React/Mobx: TypeError mobxReact.observer is not a function

reactjs

jestjs

mobx

mobx-react

ts-jest