Exercise 5.extra-3: toMatchInlineSnapshot causes JSX parsing error

[rh569]

The 3rd extra credit for exercise 5 suggests using inline snapshot testing to avoid manually copying error messages.

However, calling toMatchInlineSnapshot() causes the test to error with the following message:

SyntaxError: <path-to>/testing-react-apps/src/__tests__/exercise/05.js: Support for the experimental syntax 'jsx' isn't currently enabled (33:10):

      31 |
      32 | test(`logging in displays the user's username`, async () => {
    > 33 |   render(<Login />)
         |          ^
      34 |   const { username, password } = buildLoginForm()
      35 |
      36 |   await userEvent.type(screen.getByLabelText(/username/i), username)

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

This appears to be related to the recent update to react-scripts 5 as suggested by this issue:
facebook/create-react-app#11928

This can be worked around by using toMatchSnapshot()

[kentcdodds]

That's odd. It seems to be working for me and CI is passing. Are you on the latest version?

[rh569]

I'm on main and am up to date with the remote.

Tested after clearing out node_modules/ and build/, pulling again just to be certain, and re-running npm setup --silent.

I can also repro this with the final version of the test file - causing it to fail by changing the password error message in the msw handler, then pressing 'u' to update the snapshot. (stacktrace included this time)

 FAIL  src/__tests__/final/05.extra-3.js
  ● Test suite failed to run

    SyntaxError: <path-to>/testing-react-apps/src/__tests__/final/05.extra-3.js: Support for the experimental syntax 'jsx' isn't currently enabled (26:10):

      24 |
      25 | test(`logging in displays the user's username`, async () => {
    > 26 |   render(<Login />)
         |          ^
      27 |   const {username, password} = buildLoginForm()
      28 |
      29 |   await userEvent.type(screen.getByLabelText(/username/i), username)

    Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

      at instantiate (node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
      at toParseError (node_modules/@babel/parser/src/parse-error.js:58:12)
      at Parser.raise (node_modules/@babel/parser/src/tokenizer/index.js:1736:19)
      at Parser.expectOnePlugin (node_modules/@babel/parser/src/tokenizer/index.js:1800:18)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1239:16)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:684:23)
      at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:663:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:632:23)
      at Parser.parseMaybeUnaryOrPrivate (node_modules/@babel/parser/src/parser/expression.js:384:14)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:394:23)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        4.699 s
Ran all test suites matching /src\/__tests__\/final\/05\.extra-3\.js/i.

I was on node: 16.13.0 and npm: 8.1.4, but have since also reproduced on the latest stable 16 and 14.

[kentcdodds]

Ah, I see what's going on. So it's updating the snapshot that is causing the issue. The problem is that jest can't find our babel config (because it's hidden in react-scripts). Adding @babel/preset-react to the package.json works so that's what I've done. Thanks!