menu

Questions & Answers

TypeError: getAllByTestId(...).at is not a function locally but passes in Azure Pipeline

I am very new to programming and even greener when it comes to JS. I noticed when testing with jest, several of the tests failed even though they succeeded in the pipeline and were merged into the project. A coworker pulled my branch that had my revisions and the tests passed for him locally. The only tests that are failing use getAllByTestId from React Testing Library. Example test:

it('Should render component with text input change', () => {
    Object.defineProperty(AppConfig, 'IS_WEB', { value: false });

    const { getAllByTestId } = render(
      <div>
        <CaregiverEditAlert />
      </div>
    );
    const elem = getAllByTestId('test-input').at(0);
    elem && fireEvent.change(elem, { target: { value: 'test' } });
  });

When run, the output is:

CaregiverEditAlert › Should render component with text input change

    TypeError: getAllByTestId(...).at is not a function

      79 |       </div>
      80 |     );
    > 81 |     const elem = getAllByTestId('test-input').at(0);
         |                                               ^
      82 |     elem && fireEvent.change(elem, { target: { value: 'test' } });
      83 |   });
      84 |

      at Object.<anonymous> (src/components/__tests__/CaregiverEditAlert.test.tsx:81:47)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

If I log

console.log('GetAllByTestId is a', typeof(getAllByTestId));

it returns:

console.log
    GetAllByTestId is a function
    "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@material-ui/core": "^4.12.4",
    "@miblanchard/react-native-slider": "^2.1.0",
    "@mui/material": "^5.9.1",
    "@react-google-maps/api": "^2.13.1",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^9.3.5",
    "@react-native-community/picker": "^1.8.1",
    "@react-native-community/slider": "4.1.12",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/core": "^6.1.1",
    "@react-navigation/material-top-tabs": "^6.1.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.1.1",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "@testing-library/react": "12",
    "@testing-library/react-native": "^9.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/googlemaps": "^3.43.3",
    "@types/react": "^18.0.7",
    "@types/react-datepicker": "^4.3.4",
    "@types/react-dom": "^18.0.0",
    "@types/react-native": "^0.67.1",
    "@types/react-native-vector-icons": "^6.4.10",
    "@types/react-pdf": "^5.0.2",
    "@types/styled-components": "^5.1.24",
    "apisauce": "^2.1.5",
    "aws-amplify": "^4.3.15",
    "google-libphonenumber": "^3.2.27",
    "jest-svg-transformer": "^1.0.0",
    "modal-enhanced-react-native-web": "^0.2.0",
    "moment": "^2.29.1",
    "react": "17.0.1",
    "react-datepicker": "^4.7.0",
    "react-dom": "17.0.1",
    "react-geocode": "^0.2.3",
    "react-native": "0.65.1",
    "react-native-actionsheet": "^2.4.2",
    "react-native-communications": "^2.2.1",
    "react-native-config": "^1.4.5",
    "react-native-date-picker": "^4.2.0",
    "react-native-geocoder": "^0.5.0",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-image-crop-picker": "^0.37.3",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modal": "^13.0.1",
    "react-native-open-settings": "^1.0.1",
    "react-native-pager-view": "5.4.9",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-toast-message": "^2.1.2",
    "react-native-vector-icons": "^9.1.0",
    "react-native-web": "^0.17.7",
    "react-native-web-maps": "^0.3.0",
    "react-pdf": "^5.4.1",
    "react-portal": "^4.2.1",
    "react-redux": "^7.2.6",
    "react-test-renderer": "^17.0.2",
    "reactotron-react-native": "^5.0.1",
    "redux": "^4.1.2",
    "redux-mock-store": "^1.5.4",
    "redux-persist": "^6.0.0",
    "redux-persist-transform-filter": "^0.0.20",
    "redux-saga": "^1.1.3",
    "reduxsauce": "^1.2.1",
    "require": "^2.4.20",
    "reselect": "^4.1.5",
    "safe-buffer": "^5.2.1",
    "seamless-immutable": "^7.1.4",
    "ts-node": "^10.9.1"
  

    "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-private-methods": "^7.16.11",
    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
    "@types/jest": "^27.4.1",
    "@types/prop-types": "^15.7.4",
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0",
    "babel-loader": "^8.2.4",
    "babel-plugin-inline-dotenv": "^1.6.0",
    "babel-plugin-named-asset-import": "^0.3.8",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-react-app": "^10.0.1",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.6",
    "dotenv-expand": "^8.0.3",
    "eslint": "^8.14.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-n": "^15.2.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "eslint-plugin-react-native": "^4.0.0",
    "eslint-watch": "^8.0.0",
    "eslint-webpack-plugin": "^3.1.1",
    "fork-ts-checker-webpack-plugin": "^7.2.3",
    "html-webpack-plugin": "^5.5.0",
    "image-webpack-loader": "^8.1.0",
    "jest": "^27.5.1",
    "mini-css-extract-plugin": "^1.6.2",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "patch-package": "^6.4.7",
    "pnp-webpack-plugin": "^1.7.0",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
    "postcss-safe-parser": "^6.0.0",
    "prettier": "^2.6.2",
    "react-dev-utils": "^12.0.0",
    "react-native-dotenv": "^3.3.1",
    "reactotron-react-js": "^3.3.7",
    "reactotron-redux": "^3.1.3",
    "reactotron-redux-saga": "^4.2.3",
    "rimraf": "^3.0.2",
    "sass": "^1.52.3",
    "sass-loader": "^10.1.1",
    "style-loader": "^3.3.1",
    "styled-components": "^5.3.3",
    "ts-jest": "^27.1.3",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.71.0",
    "webpack-dev-server": "^4.8.1",
    "webpack-manifest-plugin": "^5.0.0",
    "workbox-webpack-plugin": "^6.5.2"

I have looked all over for a solution and asked some coworkers what they think the issue might be.

One mentioned it might be an issue with a version of a module I am using, but I haven't changed anything since I cloned the repo. I am also using linux and everyone else uses windows or Mac. Has anyone else come across an issue like this or know of a possible solution? Thank you. If I'm missing anything that you might need, I can include it.

Comments:
2023-01-24 23:10:14
Please share the relevant deps in your package.json.
Answers(0) :