1

I am working on a React/Redux app which uses Fluent UI. I am told that project should be able to run npm test successfully but it is failing with the following message:

SyntaxError: Unexpected token 'export'

  1 | import React, { useState } from "react";
  2 | import { useDispatch } from "react-redux";
> 3 | import { TextField } from "office-ui-fabric-react/lib/TextField"; 
    | ^
  4 | import { Dropdown } from "office-ui-fabric-react/lib/Dropdown";   
  5 | import { PrimaryButton } from "office-ui-fabric-react";
  6 | import "./TodoInput.css";

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (src/Components/TodoInput/TodoInput.js:3:1)     

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

This is my first time working with testing. Can someone guide me what I'm doing wrong.

Surya Mahla
  • 483
  • 5
  • 20
  • Most likely related to: https://stackoverflow.com/a/49676319/1870780. You'll have to tell Jest to explicitly transform `office-ui-fabric-react`. – juliomalves Feb 13 '21 at 16:39

1 Answers1

0

Remove the deep nested imports, instead use like the below one.

import { TextField, Dropdown, PrimaryButton } from "office-ui-fabric-react";
Varun V C
  • 21
  • 3