Error running tests after Paste upgrade.

[AleenaSA]

Hi, after I upgraded the paste library, getting error on running yarn test for any file that uses any Paste component.

Upgraded from 9.2.2 -> 17.7.0
Error
`● Test suite failed to run

SyntaxError: /node_modules/@twilio-paste/design-tokens/dist/tokens.raw.json: Missing semicolon. (2:11)

  1 | {
> 2 |   "aliases": {
    |            ^
  3 |     "amaranth": {
  4 |       "value": "#F22F46"
  5 |     },`

Here's my package.json for reference:

{
    "name": "frontend-template",
    "version": "0.0.1",
    "description": "Admin Center (User Interfaces)",
    "main": "src/index.tsx",
    "repository": "https://code.hq.twilio.com/dsynnott/frontend-template.git",
    "author": "dsynnott <[email protected]>",
    "license": "MIT",
    "private": false,
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.3.3"
    },
    "devDependencies": {
        "@babel/core": "^7.10.3",
        "@babel/plugin-proposal-class-properties": "^7.10.1",
        "@babel/plugin-transform-modules-commonjs": "^7.10.1",
        "@babel/preset-env": "^7.10.3",
        "@babel/preset-react": "^7.10.1",
        "@babel/preset-typescript": "^7.10.1",
        "@babel/template": "^7.10.3",
        "@babel/types": "^7.10.3",
        "@datadog/browser-rum": "^4.2.0",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^10.4.3",
        "@testing-library/react-hooks": "^3.3.0",
        "@twilio-paste/animation-library": "^0.3.9",
        "@twilio-paste/core": "^17.7.0",
        "@twilio-paste/icons": "^9.4.3",
        "@twiliointernal/cypress-helpers": "^1.11.1",
        "@twiliointernal/wtb-console-context": "^1.22.1",
        "@twiliointernal/wtb-environment": "^1.22.1",
        "@twiliointernal/wtb-logger": "^1.21.1",
        "@types/enzyme": "^3.10.3",
        "@types/jest": "^27",
        "@types/lodash": "^4.14.161",
        "@types/node": "^12.7.7",
        "@types/qs": "^6.5.3",
        "@types/react": "17.0.38",
        "@types/react-dom": "^17.0.2",
        "@types/react-router-dom": "^5.3.3",
        "@types/uuid": "^8.3.0",
        "@types/webpack-env": "^1.14.0",
        "@typescript-eslint/eslint-plugin": "^3.6.1",
        "@typescript-eslint/parser": "^3.6.1",
        "babel-jest": "^27",
        "babel-loader": "^8.1.0",
        "babel-plugin-react-remove-properties": "^0.3.0",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
        "chalk": "^2.4.2",
        "css-loader": "^3.2.0",
        "cypress": "^9.5.3",
        "cypress-localstorage-commands": "^1.4.0",
        "enzyme": "^3.10.0",
        "enzyme-to-json": "^3.4.3",
        "eslint": "^7.3.1",
        "eslint-config-airbnb": "^18.2.0",
        "eslint-config-airbnb-typescript": "^8.0.2",
        "eslint-config-prettier": "^6.11.0",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-plugin-cypress": "^2.11.2",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-jest": "^23.18.0",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.20.3",
        "eslint-plugin-react-hooks": "^4.0.8",
        "eslint-plugin-typescript": "^0.14.0",
        "file-loader": "^4.2.0",
        "html-webpack-plugin": "^3.2.0",
        "husky": "^3.0.5",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^27",
        "jest-environment-jsdom": "^27",
        "jsdom": "^16.2.2",
        "less": "^3.11.3",
        "less-loader": "^5.0.0",
        "lodash.startcase": "^4.4.0",
        "log4js": "git+ssh://[email protected]:react/log4js.git#1.1.0",
        "mini-css-extract-plugin": "^0.8.0",
        "nanoid": "^3.1.23",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "prettier": "^2.0.5",
        "react-test-renderer": "^17.0.2",
        "react-uid": "^2.3.0",
        "request": "^2.88.2",
        "source-map-loader": "^0.2.4",
        "terser-webpack-plugin": "^3.0.7",
        "ts-jest": "^27",
        "typescript": "^4.9.5",
        "url-loader": "^4.1.1",
        "uuid": "^8.3.1",
        "webpack": "^4.40.2",
        "webpack-bundle-analyzer": "^3.8.0",
        "webpack-cli": "^3.3.9",
        "webpack-dev-server": "^3.8.1"
    },
    "scripts": {
        "postinstall": "node ./scripts/yarn-check.js",
        "build": "rm -rf ./dist/assets && webpack --config webpack.config.js",
        "build:prod": "yarn build --env.production",
        "start:dev": "webpack-dev-server",
        "eslint": "eslint '__tests__/**/*.{ts,tsx}' 'src/**/*.{ts,tsx}'",
        "prettier": "prettier --check '**/*.{js,ts,tsx}'",
        "prettier:write": "prettier --write '**/*.{js,ts,tsx}'",
        "lint": "yarn prettier && yarn eslint",
        "lint:fix": "yarn prettier:write && yarn eslint --fix",
        "test": "jest",
        "cypress:open": "cypress open --config baseUrl=https://www.dev.twilio.com",
        "test:local": "cypress run --browser chrome --config baseUrl=https://www.local.twilio.com",
        "test:dev": "cypress run --config baseUrl=https://www.dev.twilio.com --browser chrome",
        "test:ci": "cypress run --config baseUrl=https://www.stage.twilio.com --browser chrome --record --key 2a3dfeb0-283a-4abc-aa7a-deb103514533",
        "ci": "yarn test:ci",
        "cypress:open:smoke": "cypress open --project smoke-test/ --config baseUrl=https://www.stage.twilio.com"
    },
    "husky": {
        "hooks": {
            "pre-commit": "yarn lint",
            "pre-push": "yarn test"
        }
    },
    "engines": {
        "node": ">=12.13.0"
    }
}

[nkrantz]

Hey @AleenaSA -

It looks like you did a pretty big version jump, from 9 to 17, so I'd recommend following our Upgrade Guide to make sure you aren't missing any breaking changes. If that doesn't help, please share a reproduction so that we can help you debug this issue. Thanks!

[AleenaSA]

Hi @nkrantz, it worked after we upgraded our jest config. But after upgrade snapshot tests generate different id, aria-labelledBy and aria-describedby every time.
` - Snapshot - 5
+ Received + 5

@@ -54,11 +54,11 @@
                    role="combobox"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-controls="downshift-17-menu"
-                     aria-describedby="74"
+                     aria-describedby="61"
                      aria-labelledby="downshift-17-label"
                      autocomplete="off"
                      class="css-qyqv68"
                      data-paste-element="COMBOBOX_ELEMENT"
                      data-testid="search-user"
@@ -89,19 +89,19 @@
                          class="css-zeqpzn"
                          data-paste-element="ICON"
                        >
                          <svg
                            aria-hidden="false"
-                           aria-labelledby="SearchIcon-75"
+                           aria-labelledby="SearchIcon-62"
                            height="100%"
                            role="img"
                            viewBox="0 0 20 20"
                            width="100%"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <title
-                             id="SearchIcon-75"
+                             id="SearchIcon-62"`

Is this expected behaviour? should we cease snapshot testing entirely?

[nkrantz]

Yup! It seems like expected behavior for the IDs to b1e different because they are dynamically created. And yes, you can stop snapshot testing. Let me know if you have any more questions!