Skip to content
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

Provided snapshot test fails for with-jest example #46838

Closed
1 task done
bonnie opened this issue Mar 6, 2023 · 2 comments · Fixed by #46885
Closed
1 task done

Provided snapshot test fails for with-jest example #46838

bonnie opened this issue Mar 6, 2023 · 2 comments · Fixed by #46885
Labels
examples Issue/PR related to examples good first issue Easy to fix issues, good for newcomers

Comments

@bonnie
Copy link

bonnie commented Mar 6, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.1
      npm: 8.1.2
      Yarn: 1.22.19
      pnpm: 7.27.0
    Relevant packages:
      next: 13.2.4-canary.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which example does this report relate to?

with-jest

What browser are you using? (if relevant)

n/a

How are you deploying your application? (if relevant)

n/a

Describe the Bug

Running npm test on the with-jest example, without any alterations, produces this error:

 FAIL  __tests__/snapshot.tsx
  ● renders homepage unchanged

    expect(received).toMatchSnapshot()

    Snapshot name: `renders homepage unchanged 1`

    - Snapshot  - 22
    + Received  + 10

    @@ -81,32 +81,20 @@
              Powered by
               
              <span
                class="logo"
              >
    -           <span
    -             style="box-sizing: border-box; display: inline-block; overflow: hidden; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
    -           >
    -             <span
    -               style="box-sizing: border-box; display: block; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
    -             >
    -               <img
    -                 alt=""
    -                 aria-hidden="true"
    -                 src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2772%27%20height=%2716%27/%3e"
    -                 style="display: block; max-width: 100%; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
    -               />
    -             </span>
    -             <img
    -               alt="Vercel Logo"
    -               data-nimg="intrinsic"
    -               decoding="async"
    -               src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    -               style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
    -             />
    -             <noscript />
    -           </span>
    +           <img
    +             alt="Vercel Logo"
    +             data-nimg="1"
    +             decoding="async"
    +             height="16"
    +             loading="lazy"
    +             src="/vercel.svg"
    +             style="color: transparent;"
    +             width="72"
    +           />
              </span>
            </a>
          </footer>
        </div>
      </div>

      4 | it('renders homepage unchanged', () => {
      5 |   const { container } = render(<Home />)
    > 6 |   expect(container).toMatchSnapshot()
        |                     ^
      7 | })
      8 |

      at Object.toMatchSnapshot (__tests__/snapshot.tsx:6:21)

 › 1 snapshot failed.
 PASS  __tests__/index.test.tsx

Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or press `u` to update them.

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   1 failed, 1 total
Time:        1.225 s
Ran all test suites related to changed files.

Expected Behavior

All tests should pass

To Reproduce

  1. Create a next app with the with-jest example:
npx create-next-app@latest --example with-jest snapshots-fail
  1. cd snapshots-fail
  2. npm test
  3. type a to run all tests
@bonnie bonnie added the examples Issue/PR related to examples label Mar 6, 2023
@balazsorban44 balazsorban44 added the good first issue Easy to fix issues, good for newcomers label Mar 7, 2023
@rayrw
Copy link
Contributor

rayrw commented Mar 7, 2023

Hi, I would like to work on this as my first contribution to next.js and vercel, if it is okay.

@kodiakhq kodiakhq bot closed this as completed in #46885 Mar 8, 2023
kodiakhq bot pushed a commit that referenced this issue Mar 8, 2023
…46885)

fixes #46838

This PR fixes the snapshot test failure of examples `with-jest` and `with-jest-babel`.

I have tested by running tests in the files generated by these 2 commands: 

```
$ npx create-next-app@latest --example https://github.com/rayrw/next.js/tree/fix-with-jest-example-test-failure/examples/with-jest fix-snapshots-failure
$ npx create-next-app@latest --example https://github.com/rayrw/next.js/tree/fix-with-jest-example-test-failure/examples/with-jest-babel fix-snapshots-failure
```
@github-actions
Copy link
Contributor

github-actions bot commented Apr 7, 2023

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 7, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
examples Issue/PR related to examples good first issue Easy to fix issues, good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants