We Keep Coding

Dynamic Icon Component breaks Jest test (in NextJS/React)

So very new to the community, because I usually find the answer to my questions just by searching the community. But this one I can't figure out.
My Setup
I am using NextJS just as a framework application, so I don't use any of its API abilities. So far no tests implemented, but now I got more time on my hands. I want to implement tests using Jest and later on implementing some e2e such as playwright. But for now Jest.
The Problem
So I am implementing Jest in my application, but somehow cannot run the test because I am using a Dynamic Icon Component within my application.
So what is this icon component I am talking about. I got tired of importing icons one by one in each page. So decided to create one component that has the name attribute, so I can pass it any SVG name and it would just render it on my screen.
// Icon.jsx
import Company from './icons/company.svg';
const iconTypes = {
'company': Company,
}
const Icon = ({ name, ...props }) => {
let Icon = iconTypes[name];
return <Icon {...props} />;
};
export default Icon;
// next.config.json
module.exports = {
webpack(config) {
config.resolve.fallback = { fs: false };
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
},
eslint: {
// Warning: This allows production builds to successfully complete even if
// your project has ESLint errors.
ignoreDuringBuilds: true,
},
reactStrictMode: true,
}
So this pretty much allows me to import an Icon by simply saying on anypage:
<Icon name="company" />
Now when implementing Jest, this component causes a lot of troubles with running my tests. I get the following error, when running my test:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at Icon.jsx:119.
...
117 | console.log(1111111, name)
118 | let Icon = iconTypes[name];
> 119 | return <Icon {...props} />;
| ^
120 | };
121 |
122 | export default Icon;
at printWarning (node_modules/react/cjs/react.development.js:220:30)
at error (node_modules/react/cjs/react.development.js:196:5)
at createElementWithValidation (node_modules/react/cjs/react.development.js:2215:7)
at Icon (res/images/Icon.jsx:119:10)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
So this error message I usually get when I pass in a name of an icon that does not exist.
So at this point I'm a bit confused on how to handle this? Is there a way to ignore this component when running the test? Or run it somehow.
Some things I already tried
//jest.config.js
module.exports = {
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.svg$": "<rootDir>/svgTransform.js"
},
setupFilesAfterEnv: ["./jest.setup.js"],
moduleNameMapper: {
"^#/libs(.*)$": "<rootDir>/libs$1",
"^#/res(.*)$": "<rootDir>/res$1",
"^#/store(.*)$": "<rootDir>/store$1",
"^#/pages(.*)$": "<rootDir>/pages$1",
'^.+\\.(css|less|scss)$': '<rootDir>/styleMock.js'
},
};
// svgTransform.js
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'svgTransform';
},
};

Solution
Let me share my solution, so others can reference it.
So the issue was still related to svg importing in Jest. Seems like my svgTransform.js was just not doing what it was supposed to do. So I replaced it with a package called jest-transformer-svg and managed to solve it.
https://www.npmjs.com/package/jest-transformer-svg

to show the loading bar till the fetched

I am trying to show the loading bar until it is fetched. so I chose to use the material UI loading bar. I created this method to show the loading bar renderProgressBar.
But when I was trying to render It was giving this error:
invariant.js:42 Uncaught Invariant Violation: Element type is
invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
I tried debugging in the console but nothing helped.
can you tell me how to fix it by using the code snippet below?
https://codesandbox.io/s/redux-async-actions-hntd8
renderProgressBar = () => {
console.log(
'store.getState().fetchingMessage---->',
store.getState().fetchingMessage
);
if (store.getState().fetchingMessage) {
console.log(
'inside if rstore.getState().fetchingMessage---->',
store.getState().fetchingMessage
);
return (
<div
>
<LinearProgress />
</div>
);
}
};

LinearProgress is not being imported correctly that's why you are getting the Invariant Violation.
As stated here: https://material-ui.com/api/linear-progress/
You want to use either of these imports:
import LinearProgress from '#material-ui/core/LinearProgress';
// or
import { LinearProgress } from '#material-ui/core';
You seem to have import {LinearProgress} from '#material-ui/core/LinearProgress'; which doesn't return undefined because it's not exporting a named module called LinearProgress under core folder.

Hey #zf I've refactored a little of your codesandbox and i found mainly two issues:
The first one is as we said before that you are importing LinearProgress the wrong way.
The other issue that ive found is that you have unmatching versions of react and reactDOM.
Then i've just added the calls to get the clases and the styles and there you got it, check the codesandbox and feel free to ask questions:
https://codesandbox.io/s/redux-async-actions-i4vqf
Remem,ber to read the docs when you are stuck, this is the main flow to solve your issues. LinearProgressDocs

Using a Custom Title Bar in an Electron JS App

I just started using the electron-react-boilerplate and currently trying to use a custom title bar by using the electron-titlebar package which was installed using npm install --save eletron-titlebar.
Based on my very weak understanding of the electron boilerplate and electron in general, I tried what the electron-titlebar docs suggested and introduced the <TitleBar> component on the same level as the children element of the Root component, resulting in the code below.
Problem: However whenever the <TitleBar> component is there, we get a blank screen. Removing the component give us back our original DOM elements, but obviously, no title bar since we just removed it.
An error is also shown in the JS console
react-dom.development.js:55 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
What is the correct way to use electron-titlebar with the electron-react-boilerplate setup?
/app/containers/App.js
// #flow
import * as React from 'react';
import TitleBar from 'electron-titlebar';
type Props = {
children: React.Node
};
export default class App extends React.Component<Props> {
props: Props;
render() {
const { children } = this.props;
return (
<div>
<TitleBar
title="Electron"
/>
{children}
</div>
)
}
}

Just starting messing around with Electron myself and ran into this error. I was able to solve it by changing my import to require:
const TitleBar = require('frameless-titlebar');

Using fineuploader with react-rails

I'm trying to use fineuploader with react and have installed all the relevant dependencies.
Following is the code I use:-
import React, { Component } from 'react'
import FineUploaderTraditional from 'fine-uploader-wrappers'
import Gallery from 'react-fine-uploader'
import 'react-fine-uploader/gallery/gallery.css'
const uploader = new FineUploaderTraditional({
options: {
chunking: {
enabled: true
},
deleteFile: {
enabled: true,
endpoint: '/uploads'
},
request: {
endpoint: '/uploads'
},
retry: {
enableAuto: true
}
}
})
class UploadComponent extends Component {
render() {
return (
<Gallery uploader={uploader} />
)
}
}
export default UploadComponent
But I get the following errors:-
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Gallery`.
at invariant (invariant.js?7313:44)
at instantiateReactComponent (instantiateReactComponent.js?e676:74)
at instantiateChild (ReactChildReconciler.js?c86a:44)
at eval (ReactChildReconciler.js?c86a:71)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:77)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:93)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:93)
at traverseAllChildren (traverseAllChildren.js?5edf:172)
at Object.instantiateChildren (ReactChildReconciler.js?c86a:70)
at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js?e1f8:185)
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in. Check the render method of
`Gallery`.
in Gallery (created by UploadComponent)
in UploadComponent
I've been following the react fineuploader documentation and I've tried a few different things but nothing seems to work.

Issue is some unmet dependency, which in my case was:
react-transition-group#1.x
I had
react-transition-group#2.x
Removing 2.x and installing 1.2.1 fixed the problem.
Keep an eye on installation dependencies for any package you are trying to configure.
Thanks to the react-fine-upload owner rnicholus for the help.

I think you have to import Gallery component from module.
import Gallery from 'react-fine-uploader'
Update:
Also try wraping Gallery inside a div
class UploadComponent extends Component {
render() {
return (
<div>
<Gallery uploader={uploader} />
</div>
)
}
}

Invariant Violation : Usage Issue for npm Library

I am trying to use the react-google-login found in npm site, but i am running in to some issues . The Error is
bundle.js:3104 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofLogin.
and
bundle.js:3104 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofLogin
This may be because because of the usage issue . I may not have imported properly too . Any help is very much appreciated.
var React = require('react')
var GoogleLogin = require('react-google-login')
var Login = React.createClass({
responseGoogle(e){
console.log("response",e)
},
render:function(){
return <div>
<GoogleLogin
clientId="xxxxxxxxxxx-yyyyyyyyyy.apps.googleusercontent.com"
buttonText="Login"
callback={this.responseGoogle} />
</div>
},
});
module.exports = Login;
~
This is most probably calling an unwanted function or class. I have been using the require and i am not familiar with import. Any suggestions or notes on proper way of figuring out correct syntaxes on the future is also highlh appreciated.

Have you tried:
var GoogleLogin = require('react-google-login').default

You need to add a line to export your component.
export default Login;