Неожиданный идентификатор при запуске модульного теста в библиотеке реагирования-тестирования

Question

Я пытаюсь выполнить простой модульный тест в React, чтобы проверить, визуализируется ли компонент. К сожалению, когда я наберу yarn test, он вернет что-то вроде этого:

> react-scripts test
 FAIL  src/components/OfficeProduction/GrossCommissionIncome/GCI_Table/GCI_Table.test.js
  ● Test suite failed to run

    C:\Users\Me\source\repos\ui\node_modules\@ui-comps\core\build\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import UxAnchor from './UxAnchor';
                                                                                                    ^^^^^^^^

    SyntaxError: Unexpected identifier

      1 | import React, {Component} from 'react';
    > 2 | import {
        | ^
      3 |   UxButton,
      4 |   UxCard,
      5 |   UxCardBody,

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/components/OfficeProduction/GrossCommissionIncome/GCI_Table/index.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.855s
Ran all test suites related to changed files.

Имеет ли это отношение к transformIgnorePatterns? У меня нет jest.config.js, когда я его установил. Любая помощь приветствуется.

Я установил последнюю версию React-Testing-Library и Jest-dom. Я просто набрал «Тест пряжи», и он всегда выдает ошибку при импорте. Я пытаюсь игнорировать узлы модулей и просто выполнить их модульный тест, чтобы увидеть, отрисовывает ли компонент.

Это файл для модульного теста ** GCI_Table.test.js *:

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



it('renders the component', () => {
    const {asFragment} = render(<GCIRetainCoachTable></GCIRetainCoachTable>);
    expect(asFragment()).toMatchSnapshot();
    // const container = render(<GCIRetainCoachTable></GCIRetainCoachTable>)
    // expect(container.firstChild).toMatchSnapshot()
})

Ожидаемый результат: Тест на прохождение, говорящий о том, что компонент отображает

Фактический результат: Тест даже небежать.

Answer 1

Так как возможно использовать babel для переноса import/export в require, вам необходимо установить babel-jest

npm i -D babel-jest

или использовать пряжу

yarn add --dev babel-jest

больше информации о Jest Начало работы