Jest/React/Mobx: TypeError mobxReact.observer не является функцией

Я пытаюсь запустить простой тест Jest для кода React/Mobx, который просто отображает маршрут и проверяет, был ли он отображен. Я не использую классы и декораторы 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 из компонента, и все отлично работает с абсолютно той же настройкой.

  • мобкс: 6.4.0
  • мобкс-реакция: 7.5.0
  • шутка: 26.6.3

person Max    schedule 13.12.2020    source источник


Ответы (1)


В документации Jest о moduleNameMapper говорится, что:

Примечание. Если вы укажете имя модуля без границ ^$, это может привести к трудным для обнаружения ошибкам. Например. relay заменит все модули, которые содержат relay в качестве подстроки в своем имени: relay, react-relay и graphql-relay все будут указывать на вашу заглушку.

У вас есть mobx в moduleNameMapper, что заглушит и mobx, и mobx-react, а это не то, что вам нужно. Вы должны быть в состоянии избавиться от ошибки, удалив это.

person Tholle    schedule 14.12.2020