question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Jest Tests Fail to Run when Upgrading to V3 of Styled Components (React Native)

See original GitHub issue

Version

styled-components: 3.0.2

Reproduction

First, just want to say thank you for this amazing lib. Of all the packages I have used over the years this one is my favorite. I am in the process of upgrading from V2 -> V3 (React Native Application). I bumped the package, npm installed, and changed all references from styled-components/native to styled-components. The app works fine but my jest tests are now failing with the following issues (Depending on the test being ran)

I’ve also opened a Spectrum thread here: https://spectrum.chat/styled-components/help?thread=b3b5504b-b01e-4a6a-8cee-b4c0a824c13b

Test suite failed to run:
TypeError: _styledComponents2.default.Text is not a function
TypeError: _styledComponents2.default.View is not a function
TypeError: _styledComponents2.default.Image is not a function

Steps to reproduce

  1. Bump Package to 3.0.2
  2. npm install
  3. Replace all deprecated styled-components/native instances
  4. Run JEST test suite

Expected Behavior

Jest tests should be able to run

Actual Behavior

Tests are failing

Example Unit Test

Below is an example of a UT I am running. It might help pinpoint the issue

import { SelectedCustomer } from '../../../src/shared-components';
import themeUtil from '../../testUtils/themeUtil';

describe('<SelectedCustomer />', () => {
  const routeToCustomers = jest.fn();
  beforeEach(() => {
    util = themeUtil(SelectedCustomer);
  });

  it('renders a SelectedCustomer with default props', () => {
    const tree = util.renderWithTheme();
    expect(tree).toMatchSnapshot();
  });

  it('renders a SelectedCustomer with default props', () => {
    const newProps = { routeToCustomers };
    const wrapper = util.shallow(newProps);
    expect(wrapper.find('#route-link').length).toEqual(1);
    wrapper.find('#route-link').simulate('press');
    expect(routeToCustomers.mock.calls.length).toBe(1);
    expect(wrapper).toMatchSnapshot();
  });
});

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

18reactions
EugeneDraitsevcommented, Jan 25, 2019

@nyl9488 @tpucci in styled-components v4 you should replace all

import styled from 'styled-components'

with

import styled from 'styled-components/native'

and remove moduleNameMapper for styled-components and it will work.

18reactions
ChildishDanbinocommented, Jan 30, 2018

Confirmed that upgrading to v3.1.4 and using

"moduleNameMapper": {
      "styled-components": "<rootDir>/node_modules/styled-components/dist/styled-components.native.cjs.js"
    },

in the jest config has resolve this issue. Closing the issue. Thank you everyone for your help!

Read more comments on GitHub >

github_iconTop Results From Across the Web

FAQs - styled-components
If you think that the issue is in duplicated styled-components module somewhere in your dependencies, there are several ways to check this. You...
Read more >
Can't get Jest to work with Styled Components which contain ...
I've been using Jest and Enzyme to write tests for my React components build with the awesome Styled Components library.
Read more >
styled-components | Yarn - Package Manager
Because styled-components allows any kind of prop to be used for styling (a trait shared by most CSS-in-JS libraries, but not the third...
Read more >
Unit Testing - Gatsby
npm install --save-dev jest babel-jest react-test-renderer babel-preset-gatsby ... For all other assets, you need to use a manual mock called file-mock.js .
Read more >
React Stripe.js reference | Stripe Documentation
Learn about React components for Stripe.js and Stripe Elements.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found