TypeError: list.map is not a function : screen.getByTestId
alamenai opened this issue · 4 comments
alamenai commented
@testing-library/reactversion:^14.3.1- Testing Framework and version:"vitest": "^2.0.5"
- DOM Environment: jsdom
Relevant code or config:
const mainCard = screen.getByTestId("layer-card")All tests that has similar code failed.
What you did:
I ran the tests locally and they passed.
When I pushed they fail.
I removed the node_modules then I run them locally and the same issue appear.
What happened:
Most of the tests fail though I did not touch them.
The error is:
TypeError: list.map is not a function
Reproduction:
This is my package.json:
{
"name": "esg",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"test": "vitest run --coverage",
"test-ui": "vitest --ui",
"test-watch": "vitest --watch",
"test-e2e": "npx playwright test",
"test-e2e-ui": "npx playwright test --ui",
"test-e2e-report": "npx playwright show-report",
"start": "next start",
"lint": "next lint",
"lint-staged": "npx lint-staged",
"lint-style": "npx stylelint src/*.css src/**/**/*.css"
},
"dependencies": {
"@clerk/localizations": "^2.4.6",
"@clerk/nextjs": "^5.2.2",
"@headlessui/tailwindcss": "^0.2.0",
"@hookform/resolvers": "^3.3.4",
"@mapbox/mapbox-gl-draw": "^1.4.3",
"@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
"@mapbox/mapbox-gl-geocoder": "^5.0.2",
"@mapbox/search-js-react": "1.0.0-beta.18",
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@next/mdx": "^14.1.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-aspect-ratio": "^1.0.3",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-toggle-group": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"@react-three/fiber": "^8.17.9",
"@reduxjs/toolkit": "^1.9.5",
"@sentry/nextjs": "^8.27.0",
"@terraformer/wkt": "^2.2.1",
"@testing-library/react-hooks": "^8.0.1",
"@tremor/react": "^3.11.0",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@turf/turf": "^7.1.0",
"@types/canvas-confetti": "^1.6.4",
"@types/mdx": "^2.0.10",
"@types/node": "20.4.0",
"@types/three": "^0.169.0",
"@yudiel/react-qr-scanner": "^2.0.4",
"canvas-confetti": "^1.9.3",
"chai-colors": "^1.0.1",
"chart.js": "^4.4.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^0.2.1",
"contentlayer": "^0.3.4",
"date-fns": "^3.6.0",
"dotenv": "^16.4.5",
"embla-carousel-react": "^8.0.0",
"eslint-config-next": "^14.1.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"framer-motion": "^10.18.0",
"html2canvas": "^1.4.1",
"i18next": "^23.4.3",
"i18next-browser-languagedetector": "^7.1.0",
"i18next-resources-to-backend": "^1.1.4",
"istanbul-lib-coverage": "^3.2.0",
"jspdf": "^2.5.1",
"lucide-react": "^0.396.0",
"mapbox-gl": "^3.0.0",
"next": "^14.1.0",
"next-contentlayer": "^0.3.4",
"next-router-mock": "^0.9.13",
"next-themes": "^0.2.1",
"normalize.css": "^8.0.1",
"nuqs": "^1.17.0",
"proj4": "^2.12.0",
"react": "^18.2.0",
"react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.50.1",
"react-i18next": "^13.5.0",
"react-redux": "^8.1.3",
"react-to-print": "^2.14.15",
"recharts": "^2.12.7",
"redux-persist": "^6.0.0",
"sharp": "^0.32.3",
"simplex-noise": "^4.0.1",
"sonner": "^1.4.2",
"stylelint": "^15.11.0",
"swr": "^2.2.0",
"tailwind-merge": "^2.5.3",
"tailwindcss-animate": "^1.0.7",
"three": "^0.169.0",
"tsconfig-paths-jest": "^0.0.1",
"usehooks-ts": "^2.16.0",
"vaul": "^0.9.0",
"wellknown": "^0.5.0",
"whatwg-fetch": "^3.6.18",
"zod": "^3.22.4"
},
"devDependencies": {
"@babel/preset-react": "^7.23.3",
"@clerk/testing": "^1.1.11",
"@commitlint/cli": "^17.8.1",
"@commitlint/config-conventional": "^17.8.1",
"@playwright/test": "^1.44.1",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/react": "^14.3.1",
"@testing-library/user-event": "^14.5.2",
"@types/date-fns": "^2.6.0",
"@types/mapbox__mapbox-gl-draw": "^1.4.7",
"@types/proj4": "^2.5.5",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/redux-mock-store": "^1.0.6",
"@types/terraformer__wkt": "^2.0.3",
"@types/wellknown": "^0.5.8",
"@typescript-eslint/eslint-plugin": "^6.19.1",
"@typescript-eslint/parser": "^6.19.1",
"@vitejs/plugin-react": "^4.3.0",
"@vitest/coverage-v8": "^2.0.5",
"@vitest/ui": "^2.0.5",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"fetch-mock": "^9.11.0",
"husky": "^8.0.3",
"jsdom": "^24.1.0",
"lint-staged": "^13.3.0",
"msw": "^1.3.2",
"node-fetch": "^3.3.2",
"nyc": "^15.1.0",
"postcss": "^8.4.33",
"prettier": "^3.2.4",
"redux-mock-store": "^1.5.4",
"stylelint-config-standard": "^34.0.0",
"stylelint-prettier": "^4.1.0",
"tailwindcss": "^3.4.1",
"ts-node": "^10.9.2",
"vitest": "^2.0.5"
}
}
Problem description:
The tests fail after I re-install the packages again ( without updating them ).
aneurysmjs commented
I'm having the same situation.
this is my component
'use client';
import { type FC, useEffect, useState } from 'react';
import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
import { useTheme } from 'next-themes';
interface ThemeSwitchProps {
className?: string;
}
const ThemeSwitch: FC<ThemeSwitchProps> = ({ className }) => {
const { setTheme, theme } = useTheme();
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
setIsLoaded(true);
}, []);
const isDark = theme === 'dark';
const handleClick = () => {
setTheme(isDark ? 'light' : 'dark');
};
return isLoaded ? (
<button role="switch" aria-checked={isDark} onClick={handleClick} className={className}>
{isDark ? <SunIcon className="h-6 w-6" /> : <MoonIcon className="h-6 w-6" />}
<span className="sr-only">switch</span>
</button>
) : null;
};
export default ThemeSwitch;and this is its test
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import ThemeSwitch from './ThemeSwitch';
describe('ThemeSwitch', () => {
it('renders theme switch', () => {
render(<ThemeSwitch />);
screen.debug();
const button = screen.getByRole('switch');
fireEvent.click(button);
});
});and this is the error
aneurysmjs commented
what I've discovered so far is that is list is an array-like and not a real array
aneurysmjs commented
Here's how I've fixed it @alamenai, you must upgrade "@testing-library/jest-dom to version 6.6.2
now list is a real array
here's my test passing
in case doesn't work, just remove node_modules and pnpm-lock.yaml and reinstall again.
alamenai commented
Thank you @aneurysmjs ,
I removed the node_modules and re-installed the packages without upgrading or downgrading the versions and the tests went back to pass.
The same for the CI/CD, I just re-run the pipeline and they passed.