Emotion: toHaveStyleRule does not work with Emotion 10

[Ailrun]

• emotion version: 10.0.0-beta.5
• react version: 16.5.2

Relevant code.

const EmotionComp = () => (
  <div
    css={css`
      width: 500px;
    `}
  />
);

describe("emotion-issue", () => {
  it("should have width", () => {
    const wrapper = shallow(<EmotionComp />);
    expect(wrapper).toHaveStyleRule("width", expect.anything());
  });
});

What you did:
Try to test styled component with toHaveStyleRule matcher and enzyme.

What happened:
The matcher cannot find className.

Reproduction:
See jsx.spec.js and styled.spec.js in the following link.
https://codesandbox.io/s/woo7jr1515

Problem description:
Since Emotion 10 uses React>=16.3 context API, we cannot get ActualComponent just with .dive() method.
https://github.com/emotion-js/emotion/blob/98a40a0002c11c63d7f4a28a6c62b1e4d0c4d7eb/packages/jest-emotion/src/utils.js#L3-L27

Suggested solution:
Add more condition for enzyme case so that we can handle Context.Consumer case.

[Ailrun]

I'm trying to fix this, but it's not that easy...
Is there a reliable way to detect Consumer node?

[mitchellhamilton]

Tbh, I would say you shouldn’t use shallow.

[Ailrun]

For all components using emotion? I.e., for almost all components?

[mitchellhamilton]

For all components. https://blog.kentcdodds.com/why-i-never-use-shallow-rendering-c08851a68bb7

[Ailrun]

so jest-emotion won't support shallow rendering with jsx (of emotion 10)?

[mitchellhamilton]

I mean tbh, I think we should completely not support shallow rendering.

[Ailrun]

That's interesting... it's too opinionated, isn't it?

[kenny-f]

We want to migrate our app (currently using sass) to use emotion. However all our component tests are currently using shallow.
I've tried using jest-emotion to update a snapshot of a shallow rendered component in a test and it doesn't work.

I understand the reasons for not using shallow but that it is not easy or always possible to change all the tests in a project to not use shallow.

It would be good to support shallow for projects during the migration phase as this allows progressive migration rather then changing the test strategy/implementation across 1000's of tests

[ryanzec]

So the discussion here makes me think that shallow rendering support is not going to added but the issue is not closed. While I understand the reasoning behind that article linked here, it is pretty much an article that promotes doing integration tests over unit tests (in which I can see why someone might not want to use shallow rendering).

For those that do want to write unit tests and use snapshot testing, shallow rendering is the way to go. If I want to write a unit test for a top level page component but have to use render / mount instead of shallow, that could result in dozens of components being generated for the snapshot which in a number of cases I know in the code I work in would result in a snapshot that would just be unusable because of its size. So is emotion 10+ going to official not support shallow rendering?

If emotion 10+ is not going to support shallow rendering, that might be a deal breaker for me. It basically prevents me from creating useful unit tests for emotion components using snapshot testing (as in that the snapshot with render rendering would generate a bunch of noise not related the unit being tested).