[React-Native] [Expo] Cannot find module 'react-dom' from 'styled-components.cjs.js'

Environment

System:

• OS: macOS 10.14
• CPU: (4) x64 Intel® Core™ i7-5557U CPU @ 3.10GHz
• Memory: 330.20 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.7.0 - ~/.nvm/versions/node/v10.7.0/bin/node
• Yarn: 1.7.0 - /usr/local/bin/yarn
• npm: 6.5.0 - ~/.nvm/versions/node/v10.7.0/bin/npm

npmPackages:

• styled-components: ^4.1.3 => 4.1.3

Reproduction

I’m working on a project on React native with Expo. I have a component that use a View and name Container.

import React from 'react'
import {
    CameraRoll,
    Button,
    Dimensions,
    FlatList,
    TouchableHighlight,
} from 'react-native'
import styled from 'styled-components/native'

export const Container = styled.SafeAreaView`
    flex: 1;
    background-color: transparent;
`

I have a file to run test with react-test-renderer who look like this :

// __tests__/Library-test.js
import React from 'react';
import {Container} from '../Library';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

test('renders correctly', () => {
  const tree = renderer.create(<Container />).toJSON();
  expect(tree).toMatchSnapshot();
});

Expected Behavior

I was expecting to have the test working perfectly.

Actual Behavior

 FAIL  components/__tests__/Library-test.js
  ● Test suite failed to run

    Cannot find module 'react-dom' from 'styled-components.cjs.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at Object.<anonymous> (node_modules/styled-components/dist/styled-components.cjs.js:16:32)

[SirPhemmiey]

Hey, have you found a solution?

[mulholo]

Yep, add styled-components/native in your import, not styled-components