javascript - Vad är den korrekta inställningen för att stödja es6-moduler?

Jag har skapat en app med create-react-app och lagt till TypeScript. Efter att ha slutfört appmodulerna ville jag göra några enhetstester och jag har installerat mocha och chai: npm install --save-dev mocha chai.

i min package.json har jag uppdaterat testskriptet till "test": "mocha src/test/*". Efter att ha använt en import i min testfil

import {assert} from 'chai'
import {File} from "../components/File"

Jag stöter på ett problem

import {assert} from 'chai'
^^^^^^

SyntaxError: Cannot use import statement outside a module

Jag har sökt mycket och provat massor av svar som detta men stöter fortfarande på samma problem -_- Och jag är förvirrad över om jag behöver installera babel? Här är min package.json någon förklaring

{
  ...
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.9",
      "@testing-library/react": "^11.2.5",
      "@testing-library/user-event": "^12.8.3",
      "@types/classnames": "^2.2.11",
      "@types/jest": "^26.0.22",
      "@types/node": "^14.14.37",
      "@types/react": "^17.0.3",
      "@types/react-dom": "^17.0.3",
      "classnames": "^2.2.6",
      "node-sass": "^5.0.0",
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-scripts": "4.0.3",
      "typescript": "^4.2.3",
      "web-vitals": "^1.1.1"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha src/test/*",
      "eject": "react-scripts eject"
    },
    ...
    "devDependencies": {
      "@types/chai": "^4.2.16",
      "@types/mocha": "^8.2.2",
      "chai": "^4.3.4",
      "cross-env": "^7.0.3",
      "mocha": "^8.3.2"
    }
  }

Här är min tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Hur kunde jag ställa in allt korrekt?

Svar #1

Det finns 02 alternativ

  1. använder ts-mocha på det korta sättet => npm install --save-dev ts-mocha

Mocha-tunn wrapper som gör det möjligt att köra TypeScript-tester med TypeScript-runtime (ts-node) för att bli av med kompilationskomplexiteten. Alla Mocha-funktioner är tillgängliga utan några begränsningar. Se dokumentationen.

använd denna ts-konfiguration för testet tsconfig.testing.json.

{
  "compilerOptions": {
      "module": "commonjs",
      "target": "es5"
  },
  "include": ["src/test/*"]
}

Detta är en grundläggande konfiguration som du kan uppdatera enligt ditt behov

Lägg till skript i package.json skript: "test-ts": "ts-mocha -p tsconfig.testing.json src/test/*"

Du bör vara uppmärksam på att importera textfiler som kan orsaka problem. Det kommer att leda till tokenfel, så flytta dem till andra filer och se till att dina utils-funktioner är rena funktioner eftersom du kör enhetstester.

En annan viktig notering: Du bör ställa in "module": "commonjs" för att åtgärda konfliktproblem, som ditt Cannot use import statement outside a module.

  1. använd vanlig mocha med ts-node/register för TypeScript-exekvering. Kolla dokumentationen
  • du bör installera ts-node och cross-env för att använda den nya tsconfig.testing.json.
  • Detta är en enkel konfiguration för tsconfig.testing.json. Observera att du bör lägga till moduleResolution som node i ovanstående konfiguration. Kolla här för mer information. Lägg till sökvägen till dina deklarationstyper om det finns några för att undvika fel av typen error TS2304: Cannot find name "type_name".
  • Lägg till skript i package.json skript: cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha -r ts-node/register src/test/*
{
  "ts-node": {
    "files": true
  },
  "compilerOptions": {
    "target": "es5",
    "module": "CommonJS",
    "moduleResolution": "node"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "./node_modules/",
    "./dist/"
  ], 
  "files": [
    "path_to_your_types_declaration"
  ]
}

Relaterade artiklar