sojinantony01 / react-cron-generator

Simple react component to generate cron expressions
MIT License
86 stars 63 forks source link

Test case failed due to cron #22

Closed lafada closed 3 years ago

lafada commented 3 years ago

I have to use react-cron-generator to display cron options. When I add them its fails my test cases.

I created react app using create-react-app package.

npx create-react-app cron-test

Then I added eslint and other needed package. after that my package.json is as below.

{
  "name": "cron-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@typescript-eslint/parser": "^4.7.0",
    "cross-env": "^7.0.2",
    "eslint": "^7.13.0",
    "react": "^17.0.1",
    "react-cron-generator": "^1.2.6",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "run-scripts": "^0.4.0",
    "typescript": "^4.0.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "run-scripts test:unit test:lint test:build",
    "test:build": "run-scripts build",
    "test:lint": "eslint ./src",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Then I run my yarn test it works fine.

AAFFVVSS:cron-test myuser$ yarn test
yarn run v1.22.5
$ run-scripts test:unit test:lint test:build

> cron-test@0.1.0 test:unit /Users/myuser/react/cron-test
> cross-env CI=1 react-scripts test --env=jsdom

npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
PASS src/App.test.js
  ✓ renders learn react link (36 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.986 s, estimated 2 s
Ran all test suites.

> cron-test@0.1.0 test:lint /Users/myuser/react/cron-test
> eslint ./src

npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> cron-test@0.1.0 test:build /Users/myuser/react/cron-test
> run-scripts build

> cron-test@0.1.0 build /Users/myuser/react/cron-test
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.2 KB  build/static/js/2.9edf6727.chunk.js
  1.39 KB  build/static/js/3.71dde3ee.chunk.js
  1.17 KB  build/static/js/runtime-main.66726b93.js
  592 B    build/static/js/main.f42a7f12.chunk.js
  546 B    build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
Browserslist: caniuse-lite is outdated. Please run the following command: `npx browserslist --update-db`

✨  Done in 13.14s.

But when I try to include react-cron-generator it start failing, I just added import Cron from 'react-cron-generator'.

$ cat src/App.js
import logo from './logo.svg';
import './App.css';

import Cron from 'react-cron-generator'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

If filed on import

AAFFBB:cron-test myuser$ yarn test
yarn run v1.22.5
$ run-scripts test:unit test:lint test:build

> cron-test@0.1.0 test:unit /Users/myuser/react/cron-test
> cross-env CI=1 react-scripts test --env=jsdom

npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020858015-0.9897713366854908/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
FAIL src/App.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/myuser/react/cron-test/node_modules/react-cron-generator/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Cron from './cron';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import './App.css';
      3 |
    > 4 | import Cron from 'react-cron-generator'
        | ^
      5 |
      6 | function App() {
      7 |   return (

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/App.js:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.03 s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cron-test@0.1.0 test:unit: `cross-env CI=1 react-scripts test --env=jsdom`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cron-test@0.1.0 test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myuser/.npm/_logs/2020-11-10T15_07_41_722Z-debug.log

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Seems like issue is at https://github.com/sojinantony01/react-cron-generator/blob/master/src/lib/index.js#L1, but is there any way to ignore it ?

sojinantony01 commented 3 years ago

I don't know the actual issue behind this. I am trying to fix this

Please have a look at these links, this may help you to skip the error

https://github.com/facebook/jest/issues/9395 https://github.com/facebook/jest/issues/9292 https://stackoverflow.com/questions/55794280/jest-fails-with-unexpected-token-on-import-statement