Javascript 添加cron包时，反应测试失败

我必须使用来显示cron选项。当我添加它们时，它会使我的测试用例失败

我使用

create-react-app

package创建了react-app

npx create-react-app cron-test

然后我添加了

eslint

和其他需要的包。之后，我的

package.json

如下所示

{
  "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"
    ]
  }
}

然后我运行我的

纱线测试

它工作正常

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.

但是当我尝试包含

react cron generator

时，它开始失败，我只是添加了

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;

如果在

导入时存档

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.

AAFFBB:cron测试myuser$纱线测试
纱线运行v1.22.5
$runscripts测试：单元测试：lint测试：构建
>克朗-test@0.1.0测试：单元/用户/myuser/react/cron测试
>跨环境CI=1反应脚本测试--env=jsdom
npm警告生命周期用于脚本的节点二进制文件是/var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/thread-160502085815-0.9897713366854908/node，但npm使用的是/usr/local/cillar/node/14.5.0/bin/node本身。使用`--scripts prepend node path`选项包括使用执行的节点二进制npm的路径。
失败src/App.test.js
● 测试套件无法运行
Jest遇到了意外的标记
这通常意味着您正试图导入Jest无法解析的文件，例如，它不是纯JavaScript。
默认情况下，如果Jest看到一个Babel配置，它将使用它来转换您的文件，忽略“node_modules”。
以下是您可以做的：
•如果您试图使用ECMAScript模块，请参阅https://jestjs.io/docs/en/ecmascript-modules 了解如何启用它。
•要转换某些“节点模块”文件，可以在配置中指定自定义“transformIgnorePatterns”。
•如果需要自定义转换，请在配置中指定“转换”选项。
•如果您只是想模拟您的非JS模块（例如二进制资产），您可以使用“moduleNameMapper”配置选项将其剔除。
您将在文档中找到这些配置选项的更多详细信息和示例：
https://jestjs.io/docs/en/configuration.html
细节：
/Users/myuser/react/cron-test/node_modules/react-cron-generator/dist/index.js:1
（{）对象，但有没有办法忽略它？因为我们无法控制
react cron generator
包。
将您的测试与该包隔离。将其包装在您控制的组件中，在测试中模拟出来。您能举个例子吗？
npx create-react-app cron-test