web-dev-qa-db-ja.com

React Jestテストはts-jestで実行できません-インポートされたファイルで予期しないトークン

予期しないトークンが原因で実行に失敗するJSXファイルに記述されたTSXファイルのテストのテストがあります。

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".

実行するJSXファイルについて、JSXで別のテストを作成しました。 React Testing Libraryを使用していますが、ファイルのインポートでテストが失敗するため、これは問題ではないと思います。

スタックトレース：

 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構成：

{
  "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

これをJest設定ファイルに追加する必要があるようです

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

詳細はこちら https://jestjs.io/docs/en/configuration.html#transform-object-string-pathtotransformer-pathtotransformer-object and here https：// kulshekhar .github.io/ts-jest/user/config /

0
Carlos Crespo

それ以来、lodash-esの特定のケースに対する別の代替案を発見しました。通常のlodashライブラリを使用して、必要な関数をインポートするだけです。その後、transformIgnorePatternsを使用する必要なく、lodash-esパッケージの利点を得ることができます。

例：

import camelCase from 'lodash/camelCase';

camelCase('my string');
0
Antfish