web-dev-qa-db-fra.com

configurer ts-jest pour réagir à un projet TypeScript

J'essaie de configurer l'environnement de test pour un projet de réaction écrit en TypeScript. Je l'ai déjà fait auparavant pour réagir mais avec ES6.

Voici à quoi ressemblent les parties pertinentes de mon package.json -

 "scripts": {
    "test": "NODE_ENV=test jest",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css)$": "jest-css-modules"
    },
    "transform": {
      "\\.(ts|tsx)$": "ts-jest"
    },
    "testRegex": ".test.(ts|tsx?)$",
    "moduleFileExensions": ["ts", "tsx", "js", "jsx", "json", "node"]
  },

Je tiens à mentionner que je compte sur ts transpiler et babel pas configuré du tout.

Voici les dépendances que j'ai incluses -

"dependencies": {
    "@types/jest": "^23.1.4",
    "@types/react": "^16.4.5",
    "@types/react-dom": "^16.0.6",
    "@types/react-redux": "^6.0.3",
    "@types/redux": "^3.6.0",
    "deep-freeze": "0.0.1",
    "jest": "^23.2.0",
    "jest-css-modules": "^1.1.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "ts-jest": "^23.0.0",
    "webpack": "^4.12.2"
  },
  "devDependencies": {
    "awesome-TypeScript-loader": "^5.2.0",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "style-loader": "^0.21.0",
    "TypeScript": "^2.9.2",
    "typings-for-css-modules-loader": "^1.7.0",
    "url-loader": "^1.0.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }

Je ne parviens pas à comprendre l'erreur suivante lorsque j'exécute npm run test, car j'ai déjà installé et spécifié ts-jest dans la transformation -

Validation Error:

  Module ts-jest in the transform option was not found.
         <rootDir> is: /Users/rahul/ot/Lab/webpack-playlist

Voici à quoi ressemble tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "noImplicitAny": true,
    "sourceMap": true,
    "target": "es5"
  }
}

Je ne sais pas comment je peux résoudre l'erreur ci-dessus. 

J'ai aussi essayé de configurer ts-jest dans tsconfig.json comme ci-dessous mais cela a tout de même donné la même erreur -

// tsconfig.json
    "jest": {
        "globals": {
          "ts-jest": {
            "tsConfigFile": "tsconfig.jest.json"
          }
        }
      }


// tsconfig.jest.json
{
  "extends": "./tsconfig",
  "compilerOptions": {
    "module": "commonjs"
  }
}
reactjstypescriptjestjs
3
comiventor

En regardant à travers cela, il n'y a pas grand chose qui soit différent de ma configuration ici:

https://github.com/jasonraimondi/TypeScript-react-starter

Il y a des différences mineures dans votre configuration de plaisanterie. Vous trouverez ci-dessous le contenu de mon fichier jest.config.js. 

module.exports = {
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  "setupFiles": [
    "<rootDir>/test/setupTests.ts"
  ]
};

J'ai un article sur tester une application TypeScript React à l'aide de ts-jest sans "create-react-app" qui, espérons-le, pourrait vous être utile.

2
Jason Raimondi

Voici un exemple de configuration pour l'utilisation de Jest dans un projet TypeScript React. Je l'ai créé moi-même et j'espère que cela vous aide:

jest.config.js 

const {defaults} = require('jest-config');

module.exports = {
  bail: true,
  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
  roots: ['src'],
  testMatch: ['<rootDir>/src/**/?(*.)test.{ts,tsx}'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  verbose: true,
};

package.json 

{
  "dependencies": {
    "@types/react": "16.7.18",
    "@types/react-dom": "16.0.11",
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "devDependencies": {
    "jest": "23.6.0",
    "ts-jest": "23.10.5"
  },
  "scripts": {
    "test": "jest"
  },
  "version": "0.0.0"
}

src/Welcome.tsx 

import * as React from 'react';

interface WelcomeProps {
  name: string,
}

const Welcome: React.FunctionComponent<WelcomeProps> = (props: WelcomeProps) => {
  return <h1>Hello, {props.name}</h1>;
};

export default Welcome;

src/Welcome.test.tsx 

import React from 'react';
import ReactDOM from 'react-dom';

import Welcome from './Welcome';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Welcome name="John Doe"/>, div);
  ReactDOM.unmountComponentAtNode(div);
});
0
Benny Neugebauer