search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.9k stars 1.12k forks source link

Vitest + @testing-library/react(?) "SyntaxError: Unexpected token '.' " #3721

Closed just-Bri closed 1 year ago

just-Bri commented 1 year ago

🐛 Bug Report

After installing @adobe/react-spectrum and using it rather than react-select I started seeing errors when trying to run vitest.

🤔 Expected Behavior

The test runs without failure.

😯 Current Behavior

 FAIL  src/Selects/OrgSwitcher.test.tsx [ src/Selects/OrgSwitcher.test.tsx ]
SyntaxError: Unexpected token '.'
 ❯ Object.compileFunction node:vm:360:18
 ❯ Object.<anonymous> node_modules/@react-spectrum/actiongroup/dist/main.js:1:1
 ❯ Object.<anonymous> node_modules/@adobe/react-spectrum/dist/main.js:6:20
 ❯ async /Users/justbri/Documents/GitHub/exhibitEditor/src/Selects/OrgSwitcher.tsx:2:31
 ❯ async /Users/justbri/Documents/GitHub/exhibitEditor/src/Selects/OrgSwitcher.test.tsx:4:31

💁 Possible Solution

I've tried: Different versions of packages. Wrapping my test render with the react-spectrum Provider to make sure the theme wasn't the problem. Changing which dom package Vitest is using.

🔦 Context

idk

💻 Code Sample

Will produce a codesandbox later when I have a bit more time. Codesandbox link: https://codesandbox.io/s/pensive-boyd-inj2op

This is a 1:1 copy of my repo, it's a private repo but there is nothing private in the repo yet so I copied all the components/deps over. FWIW the placeholder files are mock data.

If you run npm run test you'll see the error I am seeing locally. Again I want to point out the only thing that changed between tests working and not working is installing the @adobe/react-spectrum package.

🌍 Your Environment

Current versions of packages:


  "dependencies": {
    "@adobe/react-spectrum": "^3.22.0",
    "@codemirror/commands": "^6.1.2",
    "@codemirror/language": "^6.3.0",
    "@codemirror/legacy-modes": "^6.2.0",
    "@codemirror/state": "^6.1.2",
    "@hookform/resolvers": "^2.9.10",
    "@tanstack/react-query": "^4.14.3",
    "@uiw/codemirror-theme-okaidia": "^4.12.4",
    "@uiw/react-codemirror": "^4.12.4",
    "js-beautify": "^1.14.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.39.1",
    "react-toastify": "^9.1.1",
    "zod": "^3.19.1"
  },
  "devDependencies": {
    "@tanstack/react-query-devtools": "^4.14.3",
    "@testing-library/dom": "^8.19.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/codemirror": "^5.60.5",
    "@types/js-beautify": "^1.13.3",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@typescript-eslint/eslint-plugin": "^5.42.0",
    "@typescript-eslint/parser": "^5.42.0",
    "@vitejs/plugin-react": "^2.2.0",
    "@vitest/coverage-c8": "^0.24.5",
    "@vitest/ui": "^0.25.0",
    "autoprefixer": "^10.4.13",
    "classnames": "^2.3.2",
    "eslint": "^8.26.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jsdom": "^20.0.2",
    "postcss": "^8.4.18",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.2.1",
    "typescript": "^4.6.4",
    "vite": "^3.2.2",
    "vite-plugin-svgr": "^2.2.2",
    "vite-tsconfig-paths": "^3.5.2",
    "vitest": "^0.24.5"
  },
just-Bri commented 1 year ago

Updated with Codesandbox link: https://codesandbox.io/s/pensive-boyd-inj2op

just-Bri commented 1 year ago

Solution: https://github.com/vitest-dev/vitest/issues/2296#issuecomment-1307394037