Styled-components: When using jest to test a React Native component that's using styled-components, I get a ReferenceError: document is not defined.

[SyedAman]

When using jest to test a React Native component that's using styled-components, I get a ReferenceError: document is not defined.

This most likely has to do with the fact that React Native runs on a Node environment and not a browser.
Perhaps this may be a jest issue., but I have noticed this only happens when I used styled-components.

Environment

Windows 10
Node v7.3.0
Yarn v1.2.1
Create-React-Native-App v1.0.0
Unit Testing Framework: Jest

Reproduction

Steps to reproduce

1. Create a new React Native project using create-react-native-app
2. Install styled-components
3. Create a styled component like this in your App.js:

import React from 'react';
import { View } from 'react-native';
import styled from 'styled-components';

const Container = styled(View)`
    flex: 1;
    align-items: center;
    justify-content: center;
`;

1. Run jest tests with yarn run test which should run App.test.js

Expected Behavior

λ yarn run test
yarn run v1.2.1
warning You are using Node "7.3.0" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following s
emver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0"
warning ..\..\package.json: No license field
$ node node_modules/jest/bin/jest.js
 PASS  .\App.test.js
  √ renders without crashing (276ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.563s
Ran all test suites.
Done in 3.02s.

Actual Behavior

λ yarn run test
yarn run v1.2.1
warning You are using Node "7.3.0" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following s
emver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0"
warning ..\..\package.json: No license field
$ node node_modules/jest/bin/jest.js

 FAIL  .\App.test.js
  ● Test suite failed to run

    ReferenceError: document is not defined

    > 1 | import React from 'react';
      2 | import { StyleSheet, Text, View } from 'react-native';
      3 | import styled from 'styled-components';
      4 |

      at new StyleSheet (node_modules/styled-components/dist/styled-components.cjs.js:884:99)
      at Function.get$$1 (node_modules/styled-components/dist/styled-components.cjs.js:1158:34)
      at new ComponentStyle (node_modules/styled-components/dist/styled-components.cjs.js:1949:22)
      at createStyledComponent (node_modules/styled-components/dist/styled-components.cjs.js:1797:26)
      at templateFunction (node_modules/styled-components/dist/styled-components.cjs.js:2065:14)
      at Object.<anonymous> (App.js:1:2279)
      at Object.<anonymous> (App.test.js:1:170)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.705s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[kitten]

This is a well known issue that occurs because Jest is not resolving the native tests in the same way. There's a workaround that was mentioned here: https://github.com/styled-components/styled-components/issues/1495

So I'll flag this as a duplicate of #1495

Btw, you have more options than this:

import { View } from 'react-native';
import styled from 'styled-components';

const Container = styled(View)`
    flex: 1;
    align-items: center;
    justify-content: center;
`;

So generally you'd use the shorthand:

import styled from 'styled-components';

const Container = styled.View`
    flex: 1;
    align-items: center;
    justify-content: center;
`;

Or you can use the explicit import of /native which won't cause this bug without any workarounds:

import styled from 'styled-components/native';

const Container = styled.View`
    flex: 1;
    align-items: center;
    justify-content: center;
`;

[probablyup]

Can also use moduleNameMapper in jest to remap styled-components to
styled-components/native
On Sun, Mar 18, 2018 at 9:57 AM Phil Plückthun [e-mail]
wrote:

Closed #1621
https://github.com/styled-components/styled-components/issues/1621.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/styled-components/styled-components/issues/1621#event-1527243245,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAiy1mOeakMSssr-gFLAnZgtEF5f5gSEks5tfmfKgaJpZM4SvNHb
.

[SyedAman]

thanks guys :)

Apologies, didn't notice this is a duplicate. This is a duplicate of #1451 too.