Cannot find module '@reach/router' after using @gatsbyjs/reach-router

22 views Asked by At

Context: I'm trying to upgrade to React 18.

I've replaced reach/router 1.3.4 with gatsbyjs/reach-router, https://www.npmjs.com/package/@gatsbyjs/reach-router

This is suggested for when upgrading to React 18 with Gatsby.

I was also following the recommended guide on testing with Reach router here https://testing-library.com/docs/example-reach-router/

Does anyone know how to move forward? I've tried to search up and use various jest configs. I also see alternative solutions for mocking reach-router, but do I really need to mock it? I feel like this has more to do with a jest config. But I can't seem to get it to work.

Now, after replacing reach/router 1.3.4 with gatsbyjs/reach-router, everything builds fine, except my jest tests are not passing because:

Cannot find module '@reach/router' from 'src/components/common/utils/renderUtil.tsx'

Test suite failed to run

    Cannot find module '@reach/router' from 'src/components/common/Breadcrumbs.test.tsx'

    > 1 | import { createMemorySource, createHistory, LocationProvider } from '@reach/router';
        | ^
      2 | import { render, screen } from '@testing-library/react';
      3 | import React from 'react';
      4 |

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (src/components/common/Breadcrumbs.test.tsx:1:1)

enter image description here

Current jest config

module.exports = {
  transform: {
    "^.+\\.[jt]sx?$": `<rootDir>/jest-preprocess.js`,
  },
  moduleNameMapper: {
    '^@hub-fe/(.*)$':'<rootDir>/src/components/$1',
   '^@hub-client-api$':'<rootDir>/src/components/common/server.ts',
    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
  },
  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
  transformIgnorePatterns: [`node_modules/(?!(gatsby|gatsby-script|gatsby-link)/)`],
  globals: {
    __PATH_PREFIX__: ``,
  },
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    url: `http://localhost`,
  },
  setupFiles: [`<rootDir>/loadershim.js`, `<rootDir>/jest.setup.js`],
}

0

There are 0 answers