my tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "downlevelIteration": true,
    "types": ["node", "jest", "react", "react-dom"]
  },
  "include": ["next-env.d.ts", "*/.ts", "*/.tsx", "*/.config.*"],
  "exclude": ["node_modules"]
}

how is it going now

still getting the issue

what is error in testing

● Test suite failed to run

TypeError: _swiper.default.use is not a function

10 | import { Swiper, SwiperSlide } from 'swiper/react'
11 |

12 | SwiperCore.use([Pagination])

| ^
13 |
14 | interface BannerImage extends ImageType {
15 | url?: string

at Object.use (src/components/molecules/BannerCarousel/index.tsx:12:12)
at Object.<anonymous> (src/components/molecules/index.ts:47:62)
at Object.<anonymous> (src/components/atoms/Checkbox/index.tsx:11:20)
at Object.<anonymous> (src/components/atoms/index.ts:30:56)
at Object.<anonymous> (src/components/molecules/Card/index.tsx:11:16)
at Object.<anonymous> (src/tests/Card.test.tsx:9:52)

i'm testing a reusable component

is swiper working like this in react

i get this error only in tests but in my app is working normally

maybe you need to mock this behavior somehow

tried this:

jest.mock('swiper/react', () => {
return {
Swiper: jest.fn(),
SwiperSlide: jest.fn(),

});

but that not works, also the component i'm testing not uses swiper

if its not using swiper, problem is this

yeah but is being hard to figure out what is happening

find this in your code SwiperCore.use([Pagination])

src/components/molecules/BannerCarousel/index.tsx:12:12)

its a import:

import SwiperCore,{ Pagination } from 'swiper'

then below has
SwiperCore.use([pagination])

it's imported from 'swiper', not 'swiper/react' and you were mocking 'swiper/react'

share your test file

yes but the weird part is the component i'm testing dont have any import of swiper

this breaks things

import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import Card from 'components/molecules/Card'

interface Props {
children: React.ReactNode
}
const MyComponent = ({ children }: Props) => {
return <Card>{children}</Card>
}

jest.mock('swiper')

describe('Card component', () => {
it('renders homepage unchanged', () => {
const { container } = render(<Card>test</Card>)
expect(container).toMatchSnapshot()
})

// it('renders the Card component correctly', () => {
// const textToRender = 'Test Content'
// render(<MyComponent>{textToRender}</MyComponent>)
// const textMessageNode = screen.getByText(textToRender)
// expect(textMessageNode).toHaveTextContent(textToRender)
// })
})

probably it cause from Card component

and this is the component:

import { parseStyles } from 'helpers/utils'

import { Typography } from 'components/atoms'

interface Props {
children: any
className?: string
title?: string
background?: 'white' | 'gray'
onClick?: () => any
}

const Card = (props: Props) => {
const { children, className, title, background = 'gray', onClick, ...restProps } = props

const backgroundColors = {
white: 'bg-gray-xxxx-light',
gray: 'bg-gray-xxx-light',
}

const styles = {
root: {
className,
dimensions: 'p-5 rounded-lg',
bg: backgroundColors[background],
},
title: 'mb-4',
}

return (
<section {...restProps} className={parseStyles(styles.root)} onClick={onClick}>
{Boolean(title) && (
<Typography className={styles.title} variant='h4' component='h4'>
{title}
</Typography>
)}

{children}
</section>
)
}

export default Card

if code is only this

import { Swiper, SwiperSlide } from 'swiper/react'
 SwiperCore.use([Pagination])

you are not importing SwiperCore

can you share your terminal logs, when you test it

FAIL src/tests/Card.test.tsx
● Test suite failed to run

Cannot find module 'hooks' from 'src/components/molecules/ImageCarousel/index.tsx'

Require stack:
src/components/molecules/ImageCarousel/index.tsx
src/components/molecules/index.ts
src/components/atoms/Checkbox/index.tsx
src/components/atoms/index.ts
src/components/molecules/Card/index.tsx
src/tests/Card.test.tsx

14 |
15 | SwiperCore.use([Pagination])

16 |

| ^
17 | const cyPrefix = 'image-carousel-'
18 |
19 | interface Image extends ImageType {

at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
at Object.<anonymous> (src/components/molecules/ImageCarousel/index.tsx:16:16)
at Object.<anonymous> (src/components/molecules/index.ts:56:61)
at Object.<anonymous> (src/components/atoms/Checkbox/index.tsx:11:20)
at Object.<anonymous> (src/components/atoms/index.ts:30:56)
at Object.<anonymous> (src/components/molecules/Card/index.tsx:11:16)
at Object.<anonymous> (src/tests/Card.test.tsx:9:52

outputfrom terminal

if i am not wrong, swipercore should be in index.tsx at root

cuz looks like Card is not using ImageCarousel

yes this is the ImageCarousel component: https://carbon.now.sh/i8qA3WcW12gEeWOzP2r2

can't send the whole code directly here because discord limit it

yep but card is not using that carousel

i think swiper causes this

or share your repo to look deeper

i can't share because is a private repo from my company

card is not importing carousel, but still giving error about that ...

i was searching about it and i found this: https://stackoverflow.com/questions/72141568/swiper-8-and-jest

gentlemans after hours, it's with great pleasure that i inform you i solved the issue

that link above helped me A LOT

but i did a downgrade of jest to 28, ts-jest too and babel-jest

then i used same config as shown in the SO link

That's why I don't like 3rd parties

✅