so it will be easier for me to guide you

Whenever I import a file from my src that's in ts it errors out

In your

cypress.json

you'll want to have this:

json
{
  "component": {
    "componentFolder": "src",
    "supportFile": "cypress/support/support.tsx",
    "testFiles": "**/*.spec.{js,ts,jsx,tsx}"
  }
}

Are you using some library that needs to have global styles or you want to pass a provider? That's what I'm doing in support.tsx. I'm using Chakra-ui so I need to provide a theme provider

and I have this in

support.tsx

ts
/// <reference types="cypress" />

import { ChakraProvider, Box } from '@chakra-ui/react'
import { mount } from '@cypress/react'
import customTheme from '@theme/customTheme'
import { Fonts } from '@theme/Fonts'
import { createElement, ReactElement, ReactNode } from 'react'

const ThemeProvider = ({ children }: { children: ReactNode }): ReactElement => {
  return (
    <ChakraProvider resetCSS={true} theme={customTheme}>
      <Fonts />
      <Box my={4} mx={6}>
        {children}
      </Box>
    </ChakraProvider>
  )
}

Cypress.Commands.add('mount', (component) => {
  mount(createElement(ThemeProvider, null, component))
})

Cypress.Commands.add('dataCy', (value) => {
  return cy.get(`[data-cy=${value}]`)
})

then in

package.json

you can simply add a script

"cypress:tc": "cypress open-ct"

if you do

cypress open

it will open your end to end tests

if you do

cypress open-ct

itll will open your component tests

How does your index plugin

in my plugin index file I have this:

ts
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.ts can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

const injectNextDevServer = require('@cypress/react/plugins/next')
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  require('@cypress/code-coverage/task')(on, config)
  if (config.testingType === 'component') {
    injectNextDevServer(on, config)
  }

  return config
}

But this is because I'm using code coverage

if you are not using code coverage then yo don't need

require('@cypress/code-coverage/task')(on, config)

@User is cypress.json at root?

what does the nested cypress.json look like if you i may ask

it's a new file, commands.ts for me has different stuff

By the way, were you able to set up Component Testing with Cypress?