create-react-app 使用错误的依赖项运行npm test(JSDOM中使用的Node不是浏览器)

luaexgnf  于 4个月前  发布在  React
关注(0)|答案(3)|浏览(81)

描述bug

为了上下文,这是我的问题 firebase/firebase-js-sdk#4552
从评论中可以看出,Jest似乎在加载Node二进制文件,而不是浏览器二进制文件。我曾在早期版本的Jest中看到过一个 --browser 命令,类似的问题参考了这个修复方法,但这在CRA中不再受支持/不可用。

你尝试恢复依赖了吗?

我已经尝试删除 package-lock.json 和 node_modules 。

你在用户指南中搜索了哪些术语?

依赖项、测试、浏览器、Node

环境

npx: installed 67 in 3.946s

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/matthewkinton/.npm/_npx/98006/lib/node_modules/create-react-app

  System:
    OS: macOS 11.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: Not Found
    npm: 6.14.11 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: 83.0
    Safari: 14.0.2
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

此外,这个问题在Windows和Mac OS上都发生了。

重现问题的步骤

  1. npx create-react-app test --template typescript
  2. npm i firebase
  3. 添加一个类似于下面的测试
test("firestore test", async () => {
  const app = firebase.initializeApp();
  const test = await app.firestore().collection("users").doc("test").get();
});
  1. npm run test

预期行为

测试应该按预期运行并通过

实际行为

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/en/configuration#testenvironment-string.
    Consider using the "node" test environment.
    
    TypeError: this.timerId.unref is not a function

      at BackoffTimeout.unref (node_modules/@grpc/grpc-js/src/backoff-timeout.ts:117:18)
      at new ResolvingLoadBalancer (node_modules/@grpc/grpc-js/src/resolving-load-balancer.ts:199:25)
      at new ChannelImplementation (node_modules/@grpc/grpc-js/src/channel.ts:242:34)
      at new Client (node_modules/@grpc/grpc-js/src/client.ts:146:30)
      at new ServiceClientImpl (node_modules/@grpc/grpc-js/src/make-client.ts:128:3)
      at GrpcConnection.Object.<anonymous>.GrpcConnection.ensureActiveStub (node_modules/@firebase/firestore/src/platform/node/grpc_connection.ts:90:25)
      at GrpcConnection.Object.<anonymous>.GrpcConnection.openStream (node_modules/@firebase/firestore/src/platform/node/grpc_connection.ts:175:23)
      at PersistentListenStream.Object.<anonymous>.PersistentListenStream.startRpc (node_modules/@firebase/firestore/src/remote/persistent_stream.ts:571:28)
      at PersistentListenStream.Object.<anonymous>.PersistentStream.startStream (node_modules/@firebase/firestore/src/remote/persistent_stream.ts:443:24)
      at call (node_modules/@firebase/firestore/src/remote/persistent_stream.ts:420:16)
      at call (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:826:22)
      at goog.Promise.invokeCallback_ (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:1166:5)
      at executeCallback_ (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:1140:5)
      at D.call [as gc] (node_modules/@firebase/node_modules/google-closure-library/closure/goog/promise/promise.js:1111:5)
      at xc (node_modules/@firebase/node_modules/google-closure-library/closure/goog/async/run.js:124:7)
7uzetpgm

7uzetpgm2#

这个修复#2590(评论)对我不再起作用了。使用这个

jest.mock("firebase/app", () => require("firebase/firebase-app.js"));
jest.mock("firebase/firestore", () =>
  require("firebase/firebase-firestore.js")
);
jest.mock("firebase/auth", () => require("firebase/firebase-auth.js"));

我得到这个错误

Warning: This is a browser-targeted Firebase bundle but it appears it is being
         run in a Node environment.  If running in a Node environment, make sure you
         are using the bundle specified by the "main" field in package.json.
         
         If you are using Webpack, you can specify "main" as the first item in
         "resolve.mainFields":
         https://webpack.js.org/configuration/resolve/#resolvemainfields
         
         If using Rollup, use the @rollup/plugin-node-resolve plugin and specify "main"
         as the first item in "mainFields", e.g. ['main', 'module'].
         https://github.com/rollup/@rollup/plugin-node-resolve
tcbh2hod

tcbh2hod3#

晚上好,这个问题有什么更新吗?谢谢。

相关问题