mbasso / styled-components-test-utils Goto Github PK

General Information

• Bug
• Improvement
• Feature
• Other

Description

Although the project package.json properly indicates compatible versions of styled-components, this information should be included in the README so that it is easily accessible to developers.

After migrating from Jest to a Mocha x Chai setup, I was hoping to use this library to replace jest-styled-components.

But because I'm using [email protected], this isn't possible. Instead, I was met with the following error:

✖ ERROR: Error: Could not find styled-components v3 secret internals
    at getStyleSheet (/Users/lex/Projects/PLST/ps-analytics/packages/ui/node_modules/styled-components-test-utils/lib/utils/styleSheet.js:14:13)
    at Object.<anonymous> (/Users/lex/Projects/PLST/ps-analytics/packages/ui/node_modules/styled-components-test-utils/lib/utils/styleSheet.js:28:22)

Steps to reproduce

N/A

Versions

• styled-components-test-utils: 1.0.2

• node: 16.0.0

• chai: 4.3.4

• expect: n/a

• jasmine: n/a

• jest: n/a

Additional context

• I originally found this library via jest-styled-components#84
• Not sure if this library is still maintained, but in lieu of a documentation update, a library update or getting the nailed project from #2 started again would be great if possible (I don't have the bandwidth for contributions at the moment unfortunately)

General Information

• Bug
• Improvement
• Feature
• Other

Description

Similar to how other utilities provide negative matchers (such as expect's toNotExist) I would like to either see toNotHaveStyleRule supported in styled-components-test-utils or would love advice on how to achieve the same effect without updating this library. I came looking for this feature because I would like to write a test case for a styled component where I assert that a style is not present and then in a second test case, with a prop set, assert that the style is present. That way I have full coverage of both possible branches. Please let me know if any of this is not clear. Thanks in advance for the help!

Versions

• styled-components-test-utils: 0.4.1

• node: 8.11.4

• jest: n/a

• expect: 1.20.2

• chai: n/a

• jasmine: n/a

This project forked an older version of jest-styled-components and provides some of the same functionalities with different APIs, which generates confusion for the users.
Why don't we "merge" the projects (under the org I guess) and create a single repo for all the testing solutions related to Styled Components?
We could use Lerna to manage dependencies and packages.
Let me know if you are interested.

Have introduced this library into my tests and am now getting the message:

Attempted to access ReactWrapper::node, which was previously a private property on
Enzyme ReactWrapper instances, but is no longer and should not be relied upon.
Consider using the getElement() method instead.

General Information

• Bug
• Improvement
• Feature
• Other

Description

this should work, as it is a valid css construct

@media screen and (max-width: 600px) {
    &:hover {
      color: purple;
    }
  }

  @media screen and (max-width: 600px) {
    &:active {
      color: red;
    }
  }

but the test fails it is does not extract all media queries code.

Steps to reproduce

(Add link to a demo on https://jsfiddle.net or similar if possible)

Versions

• styled-components-test-utils: 1.0.0
• node: latest

General Information
Please extend an API to use specific style rules which are part of complex ones.

For example, now I can check whether the Component has the border-top style rule, but I can't do it with the border-top-width.

• Improvement

Description

Rules in Chrome browser:

border-top:

border-top-width:

Versions

• jest-styled-components: ^3.3.2
• node: 6.10.3
• jest: ^19.0.2

Thanks in advance!

General Information

• Bug
• Improvement
• Feature
• Other

Description

I'll submit a PR for this also, but would like to discuss the possibility of removing peerDependencies from this library.

I'm by no means a master of dependency management, but not sure if there is a need for peerDependencies for this library as it is always installed as a devDependency, therefore all the libraries defined in this packages' devDependencies are available to the upstream project.

The current implementation hands out npm warnings on install, but even without these peerDependencies in the project, everything continues to function normally.

If you aren't comfortable removing them completely, that's fine too, this could also be an understanding gap on my part. If that's the case, would you mind if I loosen the peerDependency versions for react, react-test-renderer and styled-components instead?

npm WARN [email protected] requires a peer of chalk@^1.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jest-diff@^20.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jest-matcher-utils@^20.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jest-snapshot@^20.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of strip-ansi@^3.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-test-renderer@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.

Thanks again for your great OSS work!

Steps to reproduce

Run npm install with this library as a devDependency

Versions

• styled-components-test-utils: 0.4.0
• node: 8.10

General Information

• Bug
• Improvement
• Feature
• Other

Description

expect({ component, modifier: "& *:not([fill='none'])" }).toHaveStyleRule('fill', '#767676');

Notice that there is a wild-card selector and other regex-valid syntax. I think we need to escape the modifier string before creating a regular expression for it.

Steps to reproduce

(Add link to a demo on https://jsfiddle.net or similar if possible)

1. Add a style that has a wild-card selector or other regex-valid character
2. Notice that the test never passes since the regex is not picking up the right style object (regex match returns null)

Versions

• styled-components-test-utils: latest
• node: 8.12.0
• chai: latest

General Information

• Bug
• Improvement
• Feature
• Other

Description

(Add images if possible)

expect({
      component,
      media: 'screen and (max-width:3840px) and (min-width:600px)',
    })

This should work and it fails
Steps to reproduce

(Add link to a demo on https://jsfiddle.net or similar if possible)

Versions

• styled-components-test-utils: lastest
• node: 10

General Information

• Bug
• Improvement
• Feature
• Other

Description

Add support for Styled Components V3 and up

Currently updating a projects' styled-components dependency above 3.0.0 results in the following error

Error: Cannot find module 'styled-components/lib/models/StyleSheet'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)

This is a result of SC only shipping flat bundles from V3, as outlined in their release notes: https://github.com/styled-components/styled-components/releases/tag/v3.0.1

Will submit a PR to add support shortly

Steps to reproduce

Update Styled Components to version 3.0.0 plus and run tests

Versions

• styled-components-test-utils: 0.3.1

• node: 8.10

• jest: N/A

• expect: N/A

• chai: 3.5.0

• jasmine: N/A