reactjs - Cypress-test mislykkes når den importerer fra kildekoden til CRA+TS-app

En av mine Cypress-tester mislykkes når den prøver å importere fra en fil i kildekoden til en create-react-app src-mappe.

Testen ser slik ut:

// cypress/integration/this-fails.js
import { MY_CONSTANT } from '../../src/constants';

describe('Cypress', () => {
  ...
})

Den importerte kildefilen ser slik ut:

// src/constants.ts
export const MY_CONSTANT = 'foo';

Cypress-testfeilen skyldes en Jest-testfil i kildekatalogen:

ERROR in /my-app/src/App.test.tsx(5,1)

Cannot find name 'test'. Do you need to install type definitions for a test runner? Try`npm i @types/jest`or`npm i @types/mocha`.

Jest-typedefinisjonene er installert. I tillegg har jeg forgjeves prøvd å ekskludere den problematiske Jest-testen i Cypress tsconfig.

// cypress/tsconfig.json
{
  ...
  "exclude": [
    "../src/App.test.tsx"
  ],
  ...
}

Her er et minimalt repo som gjenskaper problemet mitt.

Til slutt, for å klargjøre hvorfor jeg importerer ting til Cypress-tester fra kildekatalogen — den importerte variabelen er ment å være en DOM-selektor eller en funksjon som returnerer en DOM-selektor slik at selektorer ikke er hardkodet i testene.

Svar #1

Jeg er ikke sikker på hvorfor meldingen er TypeScript ga ingen output for /my-app/src/constants.ts, dette ser ut til å indikere at filen er lesbar og TypeScript prøver å analysere den, og ikke gjenkjenner syntaksen.

Jeg antar imidlertid at koden til testen kjører i en nettleserprosess og ikke kan få tilgang til filer utenfor mappen sin.

Hvis constant.ts er i cypress/fixtures, fungerer det, så en enkel måte er å legge til et skript for å kopiere filen. Et skript kalt "precypress" vil bli kjørt automatisk når "cypress"-skriptet blir startet.

Dette er omtrent 90 % på plass - du får ikke hot-module reload når constants.ts endres.

package.json

"scripts": {
  ...
  "precypress": "copyfiles ./src/constants.ts ./cypress/fixtures",
  "cypress": "cypress open"
},

Det fungerer også med funksjoner og håndterer typisering,

test

import { MY_CONSTANT, getMyConstant } from '../fixtures/src/constants';

describe('Cypress', () => {

  it('is working', () => {
    cy.visit('/')
    alert(MY_CONSTANT);
    alert(getMyConstant());
    expect(true).to.equal(true)
  })
})

constant.ts

export const MY_CONSTANT: Number = 10;

export const getMyConstant: Function = () => 20;

Relaterte artikler