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";
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.
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 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;
Our code is failing to build showing the below error. We have not used createClass anywhere. Why is this still showing?
yarn test
yarn run v1.7.0
$ jest
FAIL ./App.test.js
● Test suite failed to run
TypeError: React.createClass is not a function
> 1 | import React, { Component } from 'react';
2 | import {
3 | StyleSheet,
4 | Text,
at Object.<anonymous> (node_modules/react-native-sleek-loading-indicator/loader.js:1:333)
at Object.<anonymous> (node_modules/react-native-sleek-loading-indicator/index.js:1:288)
at Object.<anonymous> (src/Login.js:1:2238)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 18.691s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
our Code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Platform,
AsyncStorage
} from 'react-native';
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?