Bug: unit test throws "rule cache miss occurred" when nesting components

[penx]

• glamorous version: 4.12.1
• glamor version: 2.20.40
• react version: 16.2.0

Relevant code:

Component

Example.js

import glamorous from "glamorous";
import React from "react";

var InnerOne = glamorous.div({
  color: '#F00'
});

const InnerTwo = props => <InnerOne {...props} />;

const Example = glamorous(InnerTwo)(({ color }) => ({
  color: color ? color : undefined
}));

export default Example;

Test

Example.test.js

import React from "react";
import ReactDOM from "react-dom";
import Example from "./Example";

describe("Component - Example", () => {
  it("renders without crashing", () => {
    const div = document.createElement("div");
    ReactDOM.render(<Example type="text" />, div);
  });
});

What you did:

1. Compose a component from another Glamorous component that has a JSX wrapper.
2. Try to unit test this component

What happened:

The component will render fine in storybook etc. but when we run the test we get an error:

    [glamor] an unexpected rule cache miss occurred. This is probably a sign of multiple glamor instances in your app. See https://github.com/threepointone/glamor/issues/79

We've also tried with another test framework and get the same error.

Reproduction:

Shown in PR with breaking unit test - https://github.com/paypal/glamorous/pull/397

[penx]

FWIW I'm not sure the compose approach to extending styles is a good one (keen to hear opinion on this) and would prefer passing specific props down for styles that can be overridden, but I think this is a valid bug non the less.

[penx]

Here's a failing test that can be added to src/__tests__/index.js, I can't commit it as the commit hook prevents commits with failing tests 😀

test('can render nested components', () => {
  const InnerOne = glamorous.div({
    color: '#F00',
  })

  const InnerTwo = props => <InnerOne {...props} />

  const Example = glamorous(InnerTwo)(({color}) => ({
    color: color ? color : undefined,
  }))

  expect(mount(<Example />)).toMatchSnapshot()
})

[atticoos]

FYI @penx, you should be able to bypass the local commit hooks by appending --no-verify when committing if you wanted to get something shared easier 👍

[kentcdodds]

This project is now in an unmaintained status. Please see the README for more information.