reactjs - Cypress-test misslyckas med att köra när man importerar från källkoden i en CRA+TS-app

Ett av mina Cypress-test misslyckas med att köras när det försöker importera från en fil i källkoden i en create-react-app src-katalog.

Testet ser ut så här:

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

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

Den importerade källfilen ser ut så här:

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

Cypress-testfelet orsakas av en Jest-testfil i källkatalogen:

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-typdefinitionerna är installerade. Dessutom, utan framgång, har jag försökt att exkludera det problematiska Jest-testet i Cypress tsconfig.

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

Här är ett minimalt repo som reproducerar mitt problem.

Slutligen, för att förtydliga varför jag importerar saker till Cypress-tester från källkatalogen — den importerade variabeln är avsedd att vara en DOM-väljare eller en funktion som returnerar en DOM-väljare så att väljare inte är hårdkodade i testerna.

Svar #1

Jag är inte säker på varför meddelandet är TypeScript emitted no output for /my-app/src/constants.ts, det verkar tyda på att filen är läsbar och TypeScript försöker parsa den, men inte känner igen syntaxen.

Mitt antagande är dock att testets kod körs i en webbläsarprocess och inte kan komma åt filer utanför dess mapp.

Om constant.ts finns i cypress/fixtures fungerar det, så ett enkelt sätt är att lägga till ett skript för att kopiera filen. Ett skript som kallas "precypress" kommer att köras automatiskt när skriptet "cypress" anropas.

Det här är typ 90 % klart - du får inte hot-module reload när constants.ts ändras.

package.json

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

Det fungerar även med funktioner och hanterar typning,

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;

Relaterade artiklar