jest-puppe-shots icon indicating copy to clipboard operation
jest-puppe-shots copied to clipboard

Resolve error with invalid context of styled-components

Open macku opened this issue 6 years ago • 4 comments

When running test that is using STYLED_COMPONENTS as a renderer there is a problem with React context:

Failed context type: Invalid context `__styled-components-stylesheet__` supplied to `Component`.

macku avatar Feb 16 '18 03:02 macku

Most probably it's caused by different versions of styled-components used in project and jest-puppe-shots, at least it was a case in my situation, when I changed styled-components in jest-puppe-shots to peerDependency it started to use the one from root of my project and it no longer shows this error.

But it lead to new problem, in new version of styled-components directory lib has been completely removed so there is error in renderer of styled components. Here is issue about this problem: https://github.com/styled-components/styled-components/issues/1483

michalg42 avatar Mar 14 '18 09:03 michalg42

I downloaded this project and tried to fixed it by myself, but I don't know how to build this this project so I can't test it with real app, I'm quite new to lerna and this kind of stuff. :(

Fixing it is quite simple, styled-components needs to be moved to peerDependencies and at least "3.0.0" (as it had some breaking changes) and one line in styled components renderer, I could create PR but as I said, I can't test it with real app so I'm not sure if it works correctly...

michalg42 avatar Mar 22 '18 08:03 michalg42

Sounds good. You can create a Pull Requests if you have some code and I can test it later this weekend.

As for testing development version:

  1. Run npm install in the root directory
  2. Next, run npm run bootstrap
  3. In terminal go to the cd packages/jest-puppe-shots and run npm link
  4. Link the rest of the packages from the directory: cd ../jest-puppe-shots-env; npm link; cd ../jest-puppe-shots-preset; npm link
  5. Now you can start using all the packages locally in your test project. Just navigate to the project directory and in a terminal run: npm link jest-puppe-shots jest-puppe-shots-env jest-puppe-shots-preset

If you will make changes in the puppe-shots project all the change should be visible in your test project.

If you would like to remove the linked packages, simple run npm unlink jest-puppe-shots jest-puppe-shots-env jest-puppe-shots-preset.

Let me know if this helped.

macku avatar Mar 23 '18 04:03 macku

Any news on this fix?

slangberg avatar Aug 06 '19 15:08 slangberg