Fix NextJS tests

[sedatbasar]

Background:

• The basic tests started fail after adding Apollo GraphQl

AC:

• Add a test-util which intoruduces the Apollo MockedProvider and expose the render method from that
• Add eslint rule to use that render method instead of the testing-library
• Add @testing-library/user-event dependency and export {userEvent} in test util
• Add @testing-library/jest-dom dependency and create vitest.setup file and include it in vitest config

[sedatbasar]

Example files from test-utils.tsx

import React from 'react'
import { render } from '@testing-library/react'
import { MockedProvider, MockedResponse } from '@apollo/client/testing'

type Options = {
  mocks?: MockedResponse[]
}
const renderWithProviders = (ui: React.ReactElement, options: Options = {}) => {
  render(
    <MockedProvider mocks={options.mocks} addTypename={false}>
      {ui}
    </MockedProvider>
  )
}

export * from '@testing-library/react'
export { renderWithProviders as render }
export { userEvent } from '@testing-library/user-event'

eslintrc

"no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "@testing-library/react",
            "importNames": ["*"],
            "message": "Use the imports from @/__tests__/test-utils instead!"
          }
        ]
      }
    ]

vitest.setup.ts

/// <reference types="vitest" />

import '@testing-library/jest-dom/vitest'

vitest.config.ts

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import { fileURLToPath } from 'node:url'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./__tests__/utils/vitest.setup.ts']
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./', import.meta.url))
    }
  }
})