React-testing-library: Cannot find module 'pretty-format'

[losvedir]

• @testing-library/react version: 10.2.0
• Testing Framework and version:
  
  
  
  • @testing-library/dom version 7.9.0
  
  
  • jest version 25.5.4
  
  
• DOM Environment:
  
  
  
  • jsdom version 15.2.1
  
  
  • react version 16.13.1
  
  
  • node version 13.6.0
  
  
  • typescript version 3.9.3
  
  

What you did:

Dependabot upgrade of @testing-library/react from 10.0.4 to 10.2.0.

What happened:

In CI, our npm script that invokes tsc --noEmit fails with the following:

➜  assets git:(dependabot/npm_and_yarn/assets/testing-library/react-10.2.0) npx tsc --noEmit
node_modules/@testing-library/react/types/index.d.ts:3:54 - error TS2307: Cannot find module 'pretty-format' or its corresponding type declarations.

3 import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
                                                       ~~~~~~~~~~~~~~~

Problem description:

It can't find pretty-format. I do see pretty-format in my package-lock.json, version 25.5.0. It might be the "corresponding type declarations" that the error is flagging? I notice this line was added in #690, which finagles the type definitions a bit, though I don't totally understand the PR.

It could be that I'm supposed to update my package-json with a new dependency of some sort?

[kentcdodds]

Hey @samtsai, do you have any ideas here?

[samtsai]

@losvedir I'll have to setup a Typescript project that uses react-testing-library unless you have a repo I can test out. The main goal was to bring in the typings for this library without having to add too many new dependencies, but maybe we'll need to add pretty-format as a dependency in this project.

[losvedir]

Oh yeah, I forgot our repo that this is failing on is open source. Here's the dependabot PR that's failing. You should be able to check out the dependabot/npm_and_yarn/assets/testing-library/react-10.2.0 branch and see the failure. It's an elixir app, but if you cd into assets you should be able to reproduce the failure with npm install and npx tsc --noEmit without dealing with the backend.

[samtsai]

@losvedir can dependabot point to a branch?
https://github.com/testing-library/react-testing-library/tree/fix-pretty-format-import

package.json might be:

"@testing-library/react": "git://github.com/testing-library/react-testing-library.git#fix-pretty-format-import"

[losvedir]

I'm getting the same error:

node_modules/@testing-library/react/types/index.d.ts:3:54 - error TS2307: Cannot find module 'pretty-format' or its corresponding type declarations.

3 import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
                                                       ~~~~~~~~~~~~~~~

I believe it's because it's listed as a dev dependency, which means that when I run npm install from _my_ root, it won't install it. When I run npm install it will install dependencies and devDependencies for me, but not devDependencies of my dependencies.

I note that in dom-testing-library, on which your PR was based, includes it as a dependency. Perhaps you need to do the same here?

[samtsai]

I'm getting the same error:

node_modules/@testing-library/react/types/index.d.ts:3:54 - error TS2307: Cannot find module 'pretty-format' or its corresponding type declarations.

3 import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'
                                                       ~~~~~~~~~~~~~~~

I believe it's because it's listed as a dev dependency, which means that when I run npm install from _my_ root, it won't install it. When I run npm install it will install dependencies and devDependencies for me, but not devDependencies of my dependencies.

I note that in dom-testing-library, on which your PR was based, includes it as a dependency. Perhaps you need to do the same here?

I've updated the branch to include it as a Dep vs devDep but we're discussing whether or not it's really necessary. We would think pretty-format should be installed from @testing-library/dom since it already lists it as a dependency.

To test again you'll need to blow away the node_module and re-install since it's the same branch name.

[samtsai]

So working with your repo, I was able to upgrade to 10.2.0 as is.

Steps:

1. Blow away node_modules and package-lock.json
2. Re-install node_modules
3. npx tsx --noEmit

I know that removing package-lock.json has its own risk but we'd like not to have to unnecessarily add dependencies to this project when @testing-library/dom already has it as a dependency.

cc @kentcdodds

[losvedir]

Okay, thanks for looking into it. Blowing away package-lock.json might not be a possibility for us, but I think we can always work around it by explicitly adding pretty-format as a dependency ourselves.

[samtsai]

Okay, thanks for looking into it. Blowing away package-lock.json might not be a possibility for us, but I think we can always work around it by explicitly adding pretty-format as a dependency ourselves.

See if next time you do update @testing-library/dom if you get pretty-format as a dep, since its defined as one:
https://github.com/testing-library/dom-testing-library/blob/master/package.json#L44

[losvedir]

@testing-library/dom _did_ have the dependency; however it was in its _own_ node_modules:

my_app
|- node_modules
   |- ...
   |- @testing-library
      |- react
         |- node_modules
            |- ...
      |- dom
         |- node_modules
            |- ...
            |- pretty-format

Meanwhile, TypeScript's module resolution logic is as follows:

However, resolution for a non-relative module name is performed differently. Node will look for your modules in special folders named node_modules. A node_modules folder can be on the same level as the current file, or higher up in the directory chain. Node will walk up the directory chain, looking through each node_modules until it finds the module you tried to load.

That means, for @testing-library/react it would look in my_app/node_modules/testing-library/react/node_modules and my_app/node_modules, and would _not_ find it the sibling /dom tree.

I understand that npm tries to install dependencies as flat as possible, in the top-level node_modules directory, but I think if dependencies have conflicting requirements, each dependency will get their own copy in their own node_modules.

So I think the situation is that I had some other dependency with a conflicting requirement for pretty-format, and so both that dependency and @testing-library/dom installed pretty-format in their respective node_modules folders, not in the shared top-level node_modules folder. Therefore @testing-library/react, which is trying to rely on @testing-library/dom's version, wasn't able to find it.

Ultimately, I went with your proposed solution of just blowing away package-lock.json. In doing so, it re-ran the dependency resolution, and this time a single version of pretty-format satisfied all my dependencies, so it installed it into the top-level node_modules folder, and @testing-library/react's implicit reliance on it works. However, it might not work for someone else with different dependencies, I think.

[dfernandez-asapp]

This looks like a missing package dependency in @testing-library/react it doesn't matter that @testing-library/dom already includes it, there is no guarantee that npm will hoist the dependency.

I my case I only see the error when running Storybook, but after digging a little bit into the code I see that the problem started to appear after an upgrade of Jest: it seems that Jest is using v26 now, so NPM stops hoisting the v25 inside @testing-library/dom to avoid conflicts with the v26 for Jest.

@samtsai I see that you closed the PR https://github.com/testing-library/react-testing-library/pull/705 because of the comment that the depdendency should come from @testing-library/dom... I think that the PR is correct, and if the concern is ensuring the same pretty-format version it should be a peerDependency, but in this case a simple dep is the right intention. @kentcdodds Can you re-consider that PR?

A dump of npm ls pretty-format in my project:

┬ @testing-library/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├─┬ @testing-library/[email protected]
│ └─┬ @testing-library/[email protected]
│   └── [email protected]
├─┬ @types/[email protected]
│ └── [email protected]
└─┬ [email protected]
  ├─┬ @jest/[email protected]
  │ ├─┬ [email protected]
  │ │ ├─┬ [email protected]
  │ │ │ ├─┬ [email protected]
  │ │ │ │ └── [email protected]
  │ │ │ ├─┬ [email protected]
  │ │ │ │ ├─┬ [email protected]
  │ │ │ │ │ └── [email protected]  deduped
  │ │ │ │ └── [email protected]  deduped
  │ │ │ └── [email protected]
  │ │ ├─┬ [email protected]
  │ │ │ └── [email protected]  deduped
  │ │ └── [email protected]
  │ ├─┬ [email protected]
  │ │ └─┬ [email protected]
  │ │   └── [email protected]
  │ ├─┬ [email protected]
  │ │ └─┬ [email protected]
  │ │   └── [email protected]
  │ ├─┬ [email protected]
  │ │ ├─┬ [email protected]
  │ │ │ └─┬ [email protected]
  │ │ │   ├─┬ [email protected]
  │ │ │   │ └── [email protected]  deduped
  │ │ │   └── [email protected]
  │ │ ├─┬ [email protected]
  │ │ │ └── [email protected]  deduped
  │ │ ├─┬ [email protected]
  │ │ │ └── [email protected]  deduped
  │ │ └── [email protected]
  │ └─┬ [email protected]
  │   └── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └── [email protected]

In my case the workaround was to install pretty-format directly so @testing-library/react reads it from the parent, but it's a hack.

[nickmccurdy]

I'm reopening #705, we can discuss what we want to do and if it needs additional changes there.

[samtsai]

Because this is for the sake of typings I could offer an alternative solution and that is to copy the type file from pretty-format and have it live in this repo. Of course it has its trade-offs of maintaining updates if we ever upgrade pretty-format and its type changes.

[kentcdodds]

I think a better solution would be to have DOM Testing Library re-export the types from pretty-format and import them from @testing-library/dom instead.

[AlonMiz]

also getting similar with yarn 2 and webpack

(node:86324) [MODULE_NOT_FOUND] Error: @testing-library/react tried to access pretty-format, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

[Poorva17]

Getting similar error with yarn2. When we run tsc. It fails with

error TS2307: Cannot find module 'pretty-format' or its corresponding type declarations.

3 import {OptionsReceived as PrettyFormatOptions} from 'pretty-format'

[testing-library-bot]

:tada: This issue has been resolved in version 11.1.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[jordisantamaria]

Can can this error also be resolve for @testing-library/vue please.

[afontcu]

@jordisantamaria sure! if that's an issue would you like to submit a PR, please? 😃

[jordisantamaria]

PR to fix that? sorry I'm still starting with this library, so I'm not enough expert for contribute in fixing errors.

[MatanBobi]

@jordisantamaria this is now resolved in version 5.5.2 of vue-testing-library.