`/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.
Related
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.
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;
I'm working on a project and I got this error, someone know why? Thank you !
./src/config/configStore.js
Line 5: Parsing error: Unexpected character ''
3 | import { composeWithDevTools } from 'redux-devtools-extension';
> 5 | import monitorReducersEnhancer from '../enhancers/monitorReducer';
| ^
7 | import loggerMiddleware from '../middleware/logger';
8 | import rootReducer from '../Reducers/index';