Ошибка Jest & React & Typescript & React-Testing-Library

Question

У меня есть настройка проекта React / NextJS с использованием Typescript, и я добавляю модульное тестирование с помощью библиотеки Jest и React Testing.

Модульный тест для моего компонента выглядит следующим образом:

import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';

import AppLayout from '.';

describe('<AppLayout>', () => {
  it('renders children', () => {
    const children = 'Test';
    const props = { pathname: '/' };
    const component = <AppLayout {...props}>{children}</AppLayout>;
    const { getByText } = render(component);
    expect(getByText(children)).toBeInTheDocument();
  });
});

Это приводит к следующей ошибке:

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

Вот некоторые ключевые файлы в моем проекте, чтобы помочь:

.babelrc

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": ["babel-plugin-styled-components"]
    },
    "production": {
      "presets": ["next/babel"],
      "plugins": [
        "@babel/plugin-transform-react-inline-elements",
        ["babel-plugin-styled-components", { "displayName": false }]
      ]
    }
  }
}

tsconfig.js

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    ".next",
    "node_modules"
  ]
}

jest.config.js

module.exports = {
  roots: ['./'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
};

Мой проект компилируется и работает нормально, но я предполагаю, что есть некоторая конфигурацияпроблема, которую мне нужно исправить, чтобы мои модульные тесты работали правильно. Есть идеи?

Answer 1

Это jest.config.js работает с Typescript, Jest, React Testing Library и без Babel. Для проверки работоспособности выполните:

git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react/client
yarn && yarn test

Хотя testEnvironment: 'jsdom' на самом деле не требуется из-за того, что это значение по умолчанию, вы можете посмотреть другие настройки.

В качестве sidenote, Babel замечательное программное обеспечение, но вы можете установить "target": "es5" и использовать вместо него act-app-polyfill .