A react app (built with create-react-app ts) fails jest test after a rainbow kit component was added.
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import {
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import { useState } from 'react';
2 | import cn from 'classnames';
> 3 | import { ConnectButton } from '#rainbow-me/rainbowkit';
| ^
4 |
5 | import { UrlForm } from 'components';
6 | import classes from 'App.module.scss';
What could be going wrong with it?
Tests run and pass successfully after ConnectButton removed.
Related
`/Users/mac/Desktop/project/node_modules/.pnpm/#uppy+core#3.0.4/node_modules/#uppy/core/lib/index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){export { default } from './Uppy.js';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import { catchError, from, map, Observable } from 'rxjs';
> 2 | import Uppy from '#uppy/core';
| ^
3 | import AwsS3 from '#uppy/aws-s3';
4 | import { handleError, toResponseData } from 'utils/api';
5 | import { fetcher } from './fetch';`
I used "jest": "29.3.1" and pnpm for installing node packages and used vite for building.
I am new to typescript react and I am trying to use mdbreact to create my navbar, those are my importations:
import React, { Component } from "react";
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBIcon,
} from "mdbreact";
But I am getting this error:
TypeScript error in C:/projects/breaking-news/news-project/src/App.tsx(15,8):
Cannot find module 'mdbreact' or its corresponding type declarations. TS2307
13 | MDBDropdownItem,
14 | MDBIcon,
> 15 | } from "mdbreact";
| ^
16 | import { BrowserRouter as Router } from "react-router-dom";
17 |
18 | class NavbarPage extends Component {
and I believe it is something about declaring mdbreact's type while installing but I don't know how and I googled it but nothing helped.
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.
Remove the deep nested imports, instead use like the below one.
import { TextField, Dropdown, PrimaryButton } from "office-ui-fabric-react";
I added to my gatsby's webpack config directory-named-webpack-plugin which makes it possible to import files that have the same name as its parent direcory. For example I can use path 'components/Link' instead of 'components/Link/Link':
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
plugins: [new DirectoryNamedWebpackPlugin()],
},
});
};
But unfortunately when I run my test using jest I get an error like that (I also use absolute imports):
FAIL src/components/atoms/Link/Link.test.js
● Test suite failed to run
Cannot find module 'components/atoms/Icon' from 'src/components/atoms/Link/Link.js'
Require stack:
src/components/atoms/Link/Link.js
src/components/atoms/Link/Link.test.js
3 | import { useAnimation } from 'framer-motion';
4 | import PropTypes from 'prop-types';
> 5 | import Icon from 'components/atoms/Icon';
| ^
6 | import arrow from 'assets/svgs/icon_arrow.svg';
7 | import S from './Link.styles';
8 | import animations from './Link.animations';
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:307:11)
at Object.<anonymous> (src/components/atoms/Link/Link.js:5:1)
Here is my folder structure:
Is there any solution to this? I'm pretty new in the jest configuration.
Use index.js in each folders like this and forget DirectoryNamedWebpackPlugin at all
import Link from './Link';
export default Link;
Recently I want to do some unit testing for a react website. I want to import a component, say A. The code looks like:
import ComponentA from '../src/containers/ComponentA';
And ComponentA is a very complex component with a lot of import inside, like:
import React from 'react';
import { browserHistory } from 'react-router';
import request from 'utils/request';
import { ACTIONS } from 'constants/actions';
import { Table, Link } from 'components';
import ComponentB from './ComponentB';
In which utils, constants, and components are local folders and ComponentB is another component used by ComponentA.
So when I tried to import ComponentA, it gives me wired error:
● Test suite failed to run
TypeError: Cannot read property 'prototype' of undefined
1 | import React from 'react';
> 2 | import c3 from 'c3';
3 | import { isEqual } from 'lodash';
4 |
5 | import './C3Chart.scss';
The c3 appears in a component in a very base level, it works during the website, how could I fix this? Or should I mock some sub components? Any suggestions?