Closed rh569 closed 2 years ago
That's odd. It seems to be working for me and CI is passing. Are you on the latest version?
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.
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!
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:This appears to be related to the recent update to react-scripts 5 as suggested by this issue: https://github.com/facebook/create-react-app/issues/11928
This can be worked around by using
toMatchSnapshot()