reactjs - Köra Jest på TypeScript-tester i icke-src-mappar i en React-app
Jag har en react-app som jag skapade med hjälp av create-react-app med typescript-mallen. Som jag förstår det är src-mappen för kod som kommer att vara en del av webbappen. Jag skulle vilja inkludera serverkod i samma projekt och placerar därför den i en separat mapp server eftersom denna kod inte ska packas med resten av frontenden. Problemet är att jag vill lägga till Jest-tester för denna kod. React-skriptet för testning stöder inte tester någon annanstans än i src, vilket är okej (det hittar dem helt enkelt inte). Jag kan inte skriva över roots utan att "ejecta". Så jag försökte lägga till ett nytt skript i "scripts" i package.json:
"test-server":"jest server"
Problemet nu är att jest inte kan hantera TypeScript-syntax. Det får ett SyntaxError på den första platsen jag använde TypeScript. Jag försökte lägga till ts-jest som en "preset" men (1) det verkar som att React inte använder ts-jest (det använder något annat för att parsa TypeScript--kanske babel?) och därför är det inte installerat redan (2) react-scripts gillar inte heller att jag ändrar "preset". Jag skulle kunna skapa en speciell konfigurationsfil bara för server-testning, men det verkar galet att jag skulle behöva installera ts-jest bara för att köra TypeScript-tester utanför src när React redan är fullt kapabelt att göra det, så det måste redan ha den möjligheten.
Min gissning är att det måste finnas ett sätt att skapa en konfigurationsfil som jag kan använda i "test-server" för att använda babel (?) sättet att köra Jest på TypeScript, men jag känner inte babel tillräckligt väl för att veta hur man gör detta. Säkerligen har någon redan gjort detta. Jag kan inte vara den enda som vill köra tester på serverkod i TypeScript i en React-applikation.
UPPDATERING Jag provade följande konfigurationsfil och kom längre:
module.exports = {
roots: ['<rootDir>/server'],
transform: {
'^.+\\.(js|jsx|mjs|cjs|ts|tsx)$':
'<rootDir>/node_modules/react-scripts/config/jest/babelTransform.js'
},
transformIgnorePatterns: [
'[/"\]node_modules[/"\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
'^.+\\.module\\.(css|sass|scss)$',
],
testEnvironment: 'node',
};
men det misslyckas när en modul jag importerar (här "nanoid") använder modulsyntax:
Details:
.../node_modules/nanoid/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { randomFillSync } from 'crypto'
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import assert from 'assert';
2 | import fs from 'fs/promises';
> 3 | import { nanoid } from 'nanoid';
| ^
UPPDATERING #2: Tja, jag kan inte använda nanoid i tester under src heller. Så det verkar vara ett mer allvarligt problem. Kanske kan jag hacka nanoid så att det inte använder modulsyntaxen som stör Jest.
Svar #1
Konfigurationsfilen jag gav i uppdateringen är tillräcklig för att få saker att fungera. Det återstående problemet var nanoid. Jag hittade någon annanstans att den nuvarande versionen av nanoid inte fungerar med React/babel. Jag återgick till version 3.3.4, och Jest fungerar nu med mina servertester.