web-dev-qa-db-fra.com

React Le test Jest ne s'exécute pas avec ts-jest - Jeton inattendu sur le fichier importé

J'ai un test pour un test pour un fichier TSX écrit dans un fichier JSX qui ne fonctionne pas en raison d'un jeton inattendu:

Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

J'ai un autre test écrit en JSX pour un fichier JSX qui fonctionne. J'utilise React Testing Library mais je ne pense pas que ce soit le problème car le test échoue sur les importations de fichiers.

Trace de pile:

 export { default as add } from './add.js';
^^^^^^

SyntaxError: Unexpected token export

  1 | import React from 'react';
> 2 | import { debounce } from 'lodash-es';
    | ^
  3 | 
  4 | interface Props {
  5 |   bodyContent?: string

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (components/tsx/TestComponentTSX.tsx:2:1)`

Jest config:

module.exports = {
  moduleDirectories: [
    'node_modules'
  ],
  transform: {
    "\\.tsx?$": "ts-jest",
    "\\.jsx?$": "babel-jest",
  },
  globals: {
    "ts-jest": {
      "tsConfig": '<rootDir>/tsconfig.json'
    }
  }
}

TS Config:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  }
}

TestComponentTSX.tsx

import React from 'react';
import { debounce } from 'lodash-es';

interface Props {
  bodyContent?: string
}

function TestComponentTSX(props: Props) {

  const clickHandler = (): void => {
    console.log('I am being clicked!');
  };

  const debouncedClickHandler = debounce(clickHandler, 400)

  return (
    <div>
      <h1>Hello World!</h1>
      <p>{props.bodyContent || 'World...'}</p>
      <button type="button" onClick={debouncedClickHandler}>Click me!</button>
    </div>
  )
}

export default TestComponentTSX;

TestComponentTSX.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import TestComponentTSX from './TestComponentTSX';

describe('The TSX component is testable', () => {
  test('The component renders', () => {
    // Arrange
    const { getByText } = render(
      <TestComponentTSX />
    );

    // Act
    // Do something

    // Assert
    expect(getByText('Hello World!'));
  })
});

package.json

{
  "name": "jesttypescriptreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-dev": "cross-env NODE_ENV=development webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash-es": "^4.17.15",
    "react": "^16.10.1",
    "react-dom": "^16.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-TypeScript": "^7.6.0",
    "@testing-library/react": "^9.2.0",
    "@types/jest": "^24.0.18",
    "@types/lodash-es": "^4.17.3",
    "@types/react-dom": "^16.9.1",
    "babel-loader": "^8.0.6",
    "cross-env": "^6.0.0",
    "jest": "^24.9.0",
    "ts-jest": "^24.1.0",
    "ts-loader": "^6.2.0",
    "TypeScript": "^3.6.3",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  }
}
reactjsjestjsbabel-jestts-jest
4
Antfish

On dirait que vous devez l'ajouter à votre fichier de configuration Jest

"transform": {
  "\\.tsx?$": "ts-jest",
  "\\.jsx?$": "babel-jest", // if you have jsx tests too
},
"globals": {
  "ts-jest": {
    "tsConfig": pathToYourTsConfigFile
  }
}

plus d'informations ici: https://jestjs.io/docs/en/configuration.html#transform-object-string-pathtotransformer-pathtotransformer-object et ici https: // kulshekhar .github.io/ts-jest/user/config /

0
Carlos Crespo

J'ai depuis découvert une autre alternative pour le cas spécifique des lodash-es. Vous pouvez utiliser la bibliothèque lodash normale et simplement importer la fonction dont vous avez besoin. Vous pouvez alors bénéficier du package lodash-es sans avoir besoin d'utiliser transformIgnorePatterns.

Par exemple:

import camelCase from 'lodash/camelCase';

camelCase('my string');
0
Antfish