Update testing based on Failed to parse src "test-file-stub" on `next…

[angelopoole]

…/image` Error

While learning how to test next.js applications I came across this error when testing components using next/image with an image import

eg:

// /quiz-hero
import Image from 'next/image';
import quizImage from '../../public/undraw-quiz.svg';

// In render 
<Image
              height='91'
              width='198'
              layout='fixed'
              src={quizImage}
              alt='QuizImage'
            />

Error ->

Failed to parse src "test-file-stub" on next/image, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

This is fixed by adding a "/" to the beginning of your file-stub module export string.

This is not an error when you're awaiting an image using async waitFor, But comes up as an error when you're testing a component that holds another component with a "next/image" import.
eg:

// quizHero.test.tsx works like this without change.
const image = await waitFor(() => screen.findByAltText('QuizImage')); 

// but index.test.tsx fails rendering the homepage without the change.
render(<Home />); // Error: Failed to parse src "test-file-stub" on `next/image`...

// with change to __mocks__/fileMock
quizHero.test.tsx //test pass
index.test.tsx //test pass

Bug

possibly related to -> #26749

Feature

• Documentation added

Documentation / Examples

• Make sure the linting passes

[angelopoole]

Unsure if the addition is 100% necessary, but I believe it would definitely help some people out if they’re running into the issue while learning next.js && Testing

[angelopoole]

@styfle Lint failed in pre-check. I've gone ahead and updated the commit to follow the prettier guides/ Fixed what was probably causing the error.

Prettier check works on my end.

[styfle]

Thanks!

[angelopoole]

@styfle , Sorry i'm a bit lost here now 😎

error -> https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.2.88.tgz:

on -> Build: run yarn install --frozen-lockfile --check-files

Should I assume this is something to do with my version of the repo being outdated?

I'll probably need some sort of direction here, Thanks a ton btw 😅

[styfle]

It could be that the npm registry was down. I'm restarting CI so we'll see soon 👍