`@testing-library/react-hooks` is loading my whole project?

Question

I think this is an issue with module resoltuion/babel/typescript.

When using @testing-library/react-hooks, I'm running into a strange stack:

 FAIL  src/hooks/useAllPayouts.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'unknown')

       5 |   isConnected: false,
       6 |   isInternetReachable: false,
    >  7 |   type: NetInfoStateType.unknown,
         |                          ^
       8 |   details: null,
       9 | };
      10 | 

      at Object.<anonymous> (src/store/network/reducers.ts:7:26)
      at Object.<anonymous> (src/store/reducers.ts:2:1)
      at Object.<anonymous> (src/store/index.ts:8:1)
      at Object.<anonymous> (src/constants/store.ts:1:1)
      at Object.<anonymous> (src/containers/AppProvider/index.tsx:4:1)
      at Object.<anonymous> (src/index.tsx:8:1)
      at Object.<anonymous> (../../node_modules/@testing-library/react-hooks/lib/types/react.js:7:9)
      at Object.<anonymous> (../../node_modules/@testing-library/react-hooks/lib/pure.js:16:14)
      at Object.<anonymous> (../../node_modules/@testing-library/react-hooks/pure/index.js:1:1)
      at Object.<anonymous> (src/hooks/useAllPayouts.test.tsx:2:1)

which suggests that my @react-native-community/netinfo mock isn't correct, which is true... the strange bit is that I'm not actually requiring my app root (src/index.tsx), and it would appear as if it's being loaded by the react.js:7:9 line.

Looking at the library, this is what the line is: https://github.com/testing-library/react-hooks-testing-library/blob/main/src/types/react.ts#L3-L9 which compiled, looks like:

tsconfig

{
  "extends": "../../config/tsconfig.json",
  "compilerOptions": {
    "jsx": "react-native",
    "allowJs": true,
    "noEmit": true,
    "module": "esnext",
    "baseUrl": "./src",
    "paths": {
      "*": ["*"]
    }
  },
  "include": [
    "__testsFixtures__/**/*",
    "src/**/*",
    "storybook/**/*",
    "e2e/**/*"
  ],
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js",
    "detox.config.js",
    "react-native.config.js",
  ]
}

root tsconfig

{
  "compilerOptions": {
    "pretty": true,
    "inlineSourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "stripInternal": true,
    "moduleResolution": "node",
    "target": "es6",
    "lib": [
      "es6",
      "dom"
    ]
  },
  "compileOnSave": true
}

EDIT: I believe this is a babel config issue and has to do with module resolution that's happening as a result of automatically resolving relative imports from the root. Looking at possible solutions now, will answer here.

score 0 · Answer 1 · answered Apr 07 '22 at 16:17

So my issue had to do with my babel and typescript paths configuration. Opted to go with a solution where I explicitly mapped all of my aliases:

babel.config.js

[
      "module-resolver",
      {
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          assets: "./src/assets",
          components: "./src/components",
          constants: "./src/constants",
          containers: "./src/containers",
          ...
        },
      },
    ],

tsconfig.json

    "baseUrl": ".",
    "paths": {
      "assets": ["./src/assets/index.ts"],
      "assets/*": ["./src/assets/*"],
      "components/*": ["./src/components/*"],
      "constants/*": ["./src/constants/*"],
      "containers/*": ["./src/containers/*"],
      ...
    }
  },

`@testing-library/react-hooks` is loading my whole project?

1 Answers1