React With Semantic-ui-react ,JEST And Enzyme

I am running into this error where npm start just runs fine with the follwing import :

import Header from 'semantic-ui-react/dist/commonjs/elements/Header';

But when I do a npm test, It always shows me :

ReferenceError: Header is not defined

But When I change the import in the main file to the below line the npm test runs fine

import Header from '../node_modules/semantic-ui-react/dist/commonjs/elements/Header';

Is there any alternative for me to avoid referencing the import from node_modules folder?

semantic-ui-react exports all of its components as named modules, so that you don't have to dig all the way through the various paths to get to each component. Instead, you could do:

import { Button } from 'semantic-ui-react'
import { Header } from 'semantic-ui-react'
import { Container } from 'semantic-ui-react'

That's a lot simpler, yeah? 😊 And, in case semantic-ui-react changes their folder structure, you won't have to change your code.

Here is the semantic-ui-react documentation on how to import and use its components. Just click on the "Try it" icon for any of the examples.