Jest Tests Fail to Run when Upgrading to V3 of Styled Components (React Native)
See original GitHub issueVersion
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
- Bump Package to 3.0.2
- npm install
- Replace all deprecated styled-components/native instances
- 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:
- Created 6 years ago
- Comments:11 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@nyl9488 @tpucci in styled-components v4 you should replace all
with
and remove moduleNameMapper for styled-components and it will work.
Confirmed that upgrading to v3.1.4 and using
in the jest config has resolve this issue. Closing the issue. Thank you everyone for your help!