Cannot find module 'react' when running tests

[jeffreycwitt]

Description

I've been creating components using the react-js template as follows:

bit create react-js citation --scope jeffreycwitt.lbp2

Most things seem fine, but whenever I run simple test, the test sweet complains that the react module cannot be found. See below for error when running bit test

Specifications

• Bit version: 0.0.815
• Node version: v16.13.1
• npm / yarn version: 1.22.17
• Platform: Mac Os Monterey v12.5
• Bit compiler (include version): (not sure how to find this; please advise)
• Bit tester (include version): (not sure how to find this; please advise)

Context and additional information

Here is the error when running bit test

FAIL lbp2/citation/citation.spec.jsx ● Test suite failed to run

Cannot find module 'react' from 'lbp2/citation/citation.spec.jsx'

> 1 | import React from 'react';
    | ^
  2 | //import { render } from '@testing-library/react';
  3 | import ReactDOM from 'react-dom';
  4 | import { Citation } from './citation';

  at Resolver.resolveModule (../../../.bvm/versions/0.0.815/bit-0.0.815/node_modules/jest-resolve/build/resolver.js:324:11)
  at Object.<anonymous> (lbp2/citation/citation.spec.jsx:1:1)
  at TestScheduler.scheduleTests (../../../.bvm/versions/0.0.815/bit-0.0.815/node_modules/@jest/core/build/TestScheduler.js:333:13)
  at runJest (../../../.bvm/versions/0.0.815/bit-0.0.815/node_modules/@jest/core/build/runJest.js:404:19)

Any advice is much appreciated.

[itaymendel]

in your workspace.jsonc file, do you have react as a peerDependnecy?

[jeffreycwitt]

I think you've identified the problem. Thanks so much. I've modified the following block in workspace.jsonc and it seems to be working now.

"teambit.dependencies/dependency-resolver": {
    /**
     * choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
     */
    "packageManager": "teambit.dependencies/yarn",
    "policy": {
      "dependencies": {},
      "peerDependencies": {
        "react": "16.8.0"
      }
    }
  },

But I think I need to learn a little more about the difference between workspace.jsonc and package.json

I initiated the workspace with bit init and then I created this component with bit create react-js <componentName> so I'm surprised that the react dependency wasn't already specified.

Also what's the best way to add peerDependencies like this to the workspace rather than the package.json.

I mean, when I first saw the error I naturally ran yarn add react which recorded the dependency in the package.json file and didn't fix the problem. I take it that peerDependencies work different and need to go into the workspace.jsonc file. But what's the best way to add them, and do I need to manually add every peerDependency?

(This also makes me suspect that my tests might not work if I import the component to a new workspace which does not have the same peerDependencies explicitly stated)

Anyway, I guess I'll start reading this: https://bit.dev/docs/workspace/workspace-overview more closely Thanks so much for your help.

[yewinag]

I also got these errors, when installed them, It is going well I tried "bit install react, react-dom, @testing-library/react" at workspace.jsonc

"policy": {
      "dependencies": {
        "@testing-library/react": "13.4.0"
      },
      "peerDependencies": {
        "react": "17.0.2",
        "react-dom": "17.0.2"
      }
   }

I think when bit creates a component, not include react at node_modules.

[itaymendel]

i recommend checking if your component is configured to be a react component. please run bit env for this.

also, please refer to the updated docs and implementation of the React integration. this overcomes such issues by setting up react as a configuration as part of your template.