[jest-emotion] document is not defined when using jest-enzyme with React Native

[kennethnym]

Current behavior:

Asserting toHaveStyleRule on a shallow rendered React Native component will fail with error ReferenceError: document is not defined

To reproduce:

1. Create component:

import React from 'react';
import styled from '@emotion/native'

const Container = styled.View`
  height: 100px;
  width: 100px;
`;

const MyComponent = () => <Container />;

export default MyComponent;
export { Container };

2. create test:

import React from 'react';
import { matchers } from 'jest-emotion';
import { shallow } from 'enzyme'
import MyComponent, { Container } from './MyComponent';

expect.extend(matchers);

describe('<MyComponent />', () => {
  it('should have height 100', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Container)).toHaveStyleRule('height', '100px');
  });
});

Expected behavior:

toHaveStyleRule should pass.

Environment information:

• react version: 16.9.0
• react-native version: 0.61.5
• @emotion/core version: ^10.0.28
• @emotion/native version: ^10.0.27
• jest-emotion version: ^10.0.27

[Andarist]

jest-emotion works with the DOM-based emotion. If you have an idea on how to make it work with React Native as well then I would be more than happy to accept a PR for this, but I'm afraid that our team does not have time capacity to work on this ourselves.

[kennethnym]

Thank you for your quick response! I will try to make this work with JSDOM injection. Maybe jest-emotion can adopt this technique. Alternatively, since jest-styled-components has no issue with this, I could take a look at their source code and see how we could make this work with jest-emotion.

[Andarist]

Alternatively, since jest-styled-components has no issue with this, I could take a look at their source code and see how we could make this work with jest-emotion.

That probably would be the best thing to do right now 👍

[kennethnym]

Got it. I will get back to you as soon as I have any findings.

[kennethnym]

If we dive 3 times into a component:

wrapper
  .find(Container)
  .dive()
  .dive()
  .dive()
  .prop('style')

we will be able to get the style prop. I'm not sure if this is the ideal solution though. @Andarist what do you think?

[Andarist]

If it can be abstracted within jest-emotion then it's fine with me. Have you checked how styled-components do it?

[kennethnym]

Currently, jest-styled-components is also having issues with React Native: styled-components/jest-styled-components#294.

It had supposedly worked in the past in v6 (although I have never been able to get it to work on both v6 and v7) by directly accessing style prop like this:

component.props.style

but of course that would not work since the component would have no props at all.

Diving into component three times can solve both issues.

Am happy to open a PR if you're good with this 😄