-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Next.js Image does not render image under Cypress Component test #18064
Comments
In addition to using
Neither of these approaches work. Is there ANY way to get cypress component tests to render a local image file? |
FYI, here is another issue related to images in component tests: #16964 |
Hi @ahfarmer! I'm running into the same problem. Did you find any solution or workaround for this? |
Also running into this issue. |
Same, but its related to trying to use mockServiceWorker.js (which is in my /public folder) while running component tests. Seems like fileServerFolder: "public" in cypress.json doesn't really do anything for component tests? |
I am also running into this issue. |
I had the same issue Using A workaround that I found is passing
That shows the image in the cypress component environment This workaround does not like me and I do not recommend it, but it probably gives us a hint of the cause |
Should have commented this a while ago, but here's how I solved the issue. This approach replaces the // webpack.config.js
// Replace the `next/image` component with a standard HTML `img` element.
webpackConfig.plugins.push(
new webpack.NormalModuleReplacementPlugin(
/next\/image/,
require.resolve(path.join(__dirname, '..', '..', '__mocks__', 'next', 'image'))
)
); // __mocks__/next/image.tsx
// Render an HTMLImageElement in place of an Image component from `next/image`.
const Image: React.VFC = ({ ...props }) => {
return <img {...props} />;
};
export default Image; |
I'm having the same issue with a plain img tag under nextjs. Using
in
But in tests it still tries rendering from Any ideas? I'm on version 11.2.0 |
I have resolved the image rendering issue the same way that @cdierkens described. I will add the changes that I have made here. // cypress.config.ts
import path from 'path';
import { defineConfig } from 'cypress';
import { NormalModuleReplacementPlugin } from 'webpack';
export default defineConfig({
component: {
devServer: {
framework: 'next',
bundler: 'webpack',
webpackConfig: {
plugins: [
new NormalModuleReplacementPlugin(
/next\/image/,
require.resolve(path.join(__dirname, 'cypress', 'mocks', 'next', 'image'))
),
],
},
},
},
}); The URL-rewrite so that cypress can find those images happens in the mocked file. The main idea is that Next optimizes images and therefore generates new URLs. You can see the GET request address has This mock replaces the NextJs generated URL with a clean one to // cypress/mocks/next/image.tsx
import type { ImageProps } from 'next/image';
/**
* Converts the next/image static image URL to a regular path.
*
* Example:
*
* /_next/static/media/404.ea2b1f50.png -> /assets/images/404.png
*/
const convertURL = (url: string) => {
return url
.replace(/\/_next\/static\/media\//, '/assets/images/') // Use actual images location
.replace(/(?<=\.)(.+)(?=png|jp?eg|tiff?|png|webp|bmp|gif)/, '');
};
const Image = (props: ImageProps) => {
// Regular path to image resource
if (typeof props.src === 'string') {
return <img src={props.src} alt="image element" />;
}
let src: string;
// StaticImageData - an import of image resource
if ('src' in props.src) {
src = props.src.src;
} else {
// StaticRequire
src = props.src.default.src;
}
return <img src={convertURL(src)} alt="image element" />;
};
export default Image; |
Some neat work-arounds here. Another alternative is described in our blog post, using I think a lot of this should be addressed in later Cypress versions, too. Has anyone tried Cy 10+ which should address at least some of the dev-server and Next.js compat issues? |
There's a few work arounds and recommendations here. I don't think we will do anything in the immediate future outside of what we've currently got, unless someone has a compelling proposal (happy to reopen in that case). For now no worked is planned on this, so I'll close it out. |
Hello, I appreciate this is closed now but I'd like to add another workaround/how I got this working in our project :) We had a component that wrapped Next Image and passed it props from a third party CMS called Sanity. I managed to get the image mock loading using the following approach:
|
Current behavior
I have set up Cypress component testing for Next.js project which make heavy use of next/Image component.
But Next.js dev server launched by Cypress returns
404: Cannot GET /_next/image
Desired behavior
It will be cool to see next.js Image component working.
Test code to reproduce
TO DO
Cypress Version
8.3.1
Other
No response
The text was updated successfully, but these errors were encountered: