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)
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`],
}
