CODEWITHSUNDEEP
javascriptreactjsjestjsreact-testing-library
BluePilot
BluePilot

Reputation: 403

Unexpected Identifier when running unit test in react-testing-library

I am trying to do a simple unit test in React to test to see if a component renders. Unfortunately, when I type yarn test it will return something like this:

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

Does this have to do with transformIgnorePatterns? I don't have jest.config.js when I yarn installed it. Any help is appreciated.

I have installed the latest version of React-Testing-Library and Jest-dom. I have simply typed Yarn Test and it is always giving me that error for the import. I am trying to ignore the node modules and just have it unit test to see if the component renders.

This is the file for the unit test **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()
})

Expected result: Test to pass saying the component renders

Actual result: Test does not even run.

Upvotes: 1

Views: 1361

Answers (1)

Teneff
Teneff

Reputation: 32158

Since probably use babel to transpile import/export to require you need to install babel-jest

npm i -D babel-jest

or using yarn

yarn add --dev babel-jest

more info on Jest Getting started

Upvotes: 2

Related Questions