Testing error: code: 'ERR_MODULE_NOT_FOUND'

[oliviadang2024]

When I test the component using (imported from next-view-transition), it shows this error:

Error: Cannot find module 'my-project/node_modules/.pnpm/[email protected]_next@13.5.2_@babel+core@7.24.5_@opentelemetry[email protected]_react-dom_ij7rotrze5kexwddyuvkazu2ry/node_modules/next/link' imported from my-project/node_modules/.pnpm/[email protected]_next@13.5.2_@babel+core@7.24.5_@opentelemetry[email protected]_react-dom_ij7rotrze5kexwddyuvkazu2ry/node_modules/next-view-transitions/dist/index.js
Did you mean to import next@13.5.2_@babel+core@7.24.5_@opentelemetry[email protected][email protected][email protected][email protected]/node_modules/next/link.js?
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'ERR_MODULE_NOT_FOUND' }

My project is using next 13.5.2, which is different from next-view-transition next 14. However, is a basic feature and should not be an issue.
When I run pnpm dev, or build then start, the application still works perfectly fine. Just the tests are failing. I'm using @testing-library/react

[jonathan-ingram]

@oliviadang2024 Did you manage to find a solution to this? 🙂

I had similar problems using Jest (along with additional errors regarding Jest encountering an unexpected token etc). 🤔

I assume this is happening because Jest can't see any links inside our components/pages (because they're now being handled by next-view-transitions rather than next/link) therefore, I was able to fix this by mocking the rendering of those links instead....

jest.mock("next-view-transitions", () => ({
  Link: jest.fn(({ children, ...rest }) => <a {...rest}>{children}</a>),
}));

This allows the link to be rendered (in the eyes of Jest) with both ...rest and children ensuring anything else associated with your links is not lost in the process.

Happy to hear alternative methods if someone suggests something more elegant, thanks! 🙂