Chapter 21: Testing the Logged-In User's Username

React Programming
1

Error: SyntaxError: Cannot use import statement outside a module

  src/App.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

I have tried many things to get past this but currently nothing seems to work. Any thoughts?

2

It seems like the file isn’t getting parsed by babel before it’s run.

You might try comparing your jest config file and package.json against the ones in the solutions folders to see if there are differences (and/or try running the solutions code on your machine to see if it’s working)

3

There is nothing in the book about setting up a jest.config.js file - I have read and re-read the entire chapter. I have searched the index, etc. I have looked through the entire resources file for the entire book and there is no jest.config.js file. My project package.json and src/setupTests.js file matches the solution example(s) found in //solutions/21-testing-with-jest-and-the-react-testing-library.

node -v
v22.9.0
npx -v
10.9.0
npm -v
10.9.0

// package.json
{
“name”: “code-cafe”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“@testing-library/jest-dom”: “^5.16.5”,
“@testing-library/react”: “^13.4.0”,
“@testing-library/user-event”: “^14.2.0”,
“axios”: “^0.27.2”,
“eslint-config-airbnb”: “^19.0.4”,
“http-proxy-middleware”: “^2.0.1”,
“msw”: “^0.47.4”,
“prop-types”: “^15.7.2”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-router-dom”: “^6.2.1”,
“react-scripts”: “5.0.1”,
“web-vitals”: “^2.1.4”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“lint”: “eslint src --max-warnings=0”,
“eject”: “react-scripts eject”
},
“eslintConfig”: {
“extends”: [
“react-app”,
“react-app/jest”,
“airbnb”,
“airbnb/hooks”
],
“rules”: {
“react/react-in-jsx-scope”: “off”,
“react/jsx-filename-extension”: [
“warn”,
{
“extensions”: [
“.js”,
“.jsx”
]
}
],
“no-console”: “off”
}
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
}
}

4

Sorry, I was going by memory from various projects. React scripts contains the jest config in this case.

Try running npm install and then npm test in /solutions/21-testing-with-jest-and-the-react-testing-library and see if that works or not. Then, at least you’ll know if it’s a code thing or something that’s changed with node or npm over the last two years

5

I was able to build and run the 21 solution. I then downgraded react and all dependencies to match the solution, did a build and now the tests will run but the App.test.js fails with a network error.

“dependencies”: {
“@testing-library/jest-dom”: “^5.16.5”,
“@testing-library/react”: “^13.4.0”,
“@testing-library/user-event”: “^14.2.0”,
“axios”: “^0.27.2”,
“eslint-config-airbnb”: “^19.0.4”,
“http-proxy-middleware”: “^2.0.1”,
“msw”: “^0.47.4”,
“prop-types”: “^15.7.2”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-number-format”: “^5.4.2”,
“react-router-dom”: “^6.2.1”,
“react-scripts”: “5.0.1”,
“react-select”: “^5.8.3”,
“web-vitals”: “^2.1.4”
},

Its as if the setupServer isnt working, or the handlers arent working as intended.

AxiosError {
message: ‘Network Error’,
name: ‘AxiosError’,
code: ‘ERR_NETWORK’,
config: {
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
adapter: [Function: xhrAdapter],
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
xsrfCookieName: ‘XSRF-TOKEN’,
xsrfHeaderName: ‘X-XSRF-TOKEN’,
maxContentLength: -1,
maxBodyLength: -1,
env: { FormData: [Function] },
validateStatus: [Function: validateStatus],
headers: { Accept: ‘application/json, text/plain, /’ },
method: ‘get’,
url: ‘/api/auth/current-user’,
data: undefined
},
request: XMLHttpRequestOverride {
_events: ,
log: [Function: debug] {
namespace: ‘xhr:request GET /api/auth/current-user’,
useColors: false,
color: 179,
extend: [Function: extend],
destroy: [Function: deprecated],
enabled: [Getter/Setter],
inspectOpts: {},
log: undefined
},
UNSENT: 0,
OPENED: 1,
HEADERS_RECEIVED: 2,
LOADING: 3,
DONE: 4,
onreadystatechange: null,
onabort: [Function: handleAbort],
onerror: [Function: handleError],
onload: null,
onloadend: [Function: onloadend],
onloadstart: null,
onprogress: null,
ontimeout: [Function: handleTimeout],
url: ‘/api/auth/current-user’,
method: ‘GET’,
readyState: 0,
withCredentials: false,
status: 200,
statusText: ‘OK’,
response: null,
responseType: ‘text’,
responseText: null,
responseXML: null,
responseURL: ‘’,
upload: {},
timeout: 0,
_requestHeaders: HeadersPolyfill1 {
[Symbol(normalizedHeaders)]: [Object],
[Symbol(rawHeaderNames)]: [Map]
},
_responseHeaders: HeadersPolyfill1 {
[Symbol(normalizedHeaders)]: {},
[Symbol(rawHeaderNames)]: Map(0) {}
},
async: true,
user: undefined,
password: undefined,
data: undefined
},
response: XMLHttpRequestOverride {
_events: ,
log: [Function: debug] {
namespace: ‘xhr:request GET /api/auth/current-user’,
useColors: false,
color: 179,
extend: [Function: extend],
destroy: [Function: deprecated],
enabled: [Getter/Setter],
inspectOpts: {},
log: undefined
},
UNSENT: 0,
OPENED: 1,
HEADERS_RECEIVED: 2,
LOADING: 3,
DONE: 4,
onreadystatechange: null,
onabort: [Function: handleAbort],
onerror: [Function: handleError],
onload: null,
onloadend: [Function: onloadend],
onloadstart: null,
onprogress: null,
ontimeout: [Function: handleTimeout],
url: ‘/api/auth/current-user’,
method: ‘GET’,
readyState: 0,
withCredentials: false,
status: 200,
statusText: ‘OK’,
response: null,
responseType: ‘text’,
responseText: null,
responseXML: null,
responseURL: ‘’,
upload: {},
timeout: 0,
_requestHeaders: HeadersPolyfill1 {
[Symbol(normalizedHeaders)]: [Object],
[Symbol(rawHeaderNames)]: [Map]
},
_responseHeaders: HeadersPolyfill1 {
[Symbol(normalizedHeaders)]: {},
[Symbol(rawHeaderNames)]: Map(0) {}
},
async: true,
user: undefined,
password: undefined,
data: undefined
}
}

6

All the files in the src/mocks directory match the solution as well.

7

I did a build and run on ch 21 solutions files and it did not work. I believe it has something to do with node but not sure what. Most online recs are to stop using jest so im going to just skip the remaining test chapters. I was hoping to learn how to test react with this book. Anyhow the book is excellent, I have now read it 3 times. Thank you for your help.

8

Using node 20 and 22, I was able to successfully run a npm install and npm run test in /react-resources/solutions/21-testing-with-jest-and-the-react-testing-library on my computer, so I think the code will work if all the dependencies are the versions we used in the book.

If you upgraded axios to v1, you may have changed some of the axios calls, which could be why you were seeing network errors after downgrading to v0.27. (You might be able to just leave that as v1 or you might need to go back and downgrade the calls.)

Newer versions of jest I think try to support ESM more natively and/or you could be getting conflicts between the jest internally used by react-scripts and the newer jest from package.json.

The various testing libraries tend to be fairly similar so hopefully you will have learned useful things even if you future projects use a testing library other than jest.

The chapter on end to end testing uses Cypress and doesn’t rely too much on the jest work of the previous chapter, so you may also still be able to do that chapter even if you don’t get the jest chapter working.

One other option, could be using the solution from chapter 19 (so everything is running on the older versions of dependencies) and then building out the jest code from there.

Glad to hear you’ve enjoyed the book and it’s been useful for you!