Using with react-responsive. antd cause react-responsive failure
See original GitHub issueVersion
3.0.1
Environment
jest test environment
Reproduction link
Steps to reproduce
I met this bug in a complex situation and I tried to simplify it, so this test case seems strange.
import React from 'react';
import { mount } from 'enzyme';
import 'antd';
import MediaQuery from 'react-responsive';
test('<MediaQuery />', () => {
const wrapper = mount(
<div>
<MediaQuery minDeviceWidth={1224} values={{ deviceWidth: 1600 }}>
<div>You are a desktop or laptop</div>
</MediaQuery>
</div>
);
expect(wrapper.text()).toBe('You are a desktop or laptop');
});
What is expected?
import 'antd'
should not affect react-responsive
What is actually happening?
once antd
is imported before react-responsive
this test fails
Comment import 'antd'
or move it one line below would make this test pass.
Issue Analytics
- State:
- Created 6 years ago
- Comments:12 (5 by maintainers)
Top Results From Across the Web
react-responsive-carousel not working properly in webpack 5
I just migrated my project from webpack v4 to v5. It is migrated successfully. However , I am getting an issue with react-responsive...
Read more >Responsive React - Medium
React Responsive (our recommendation):. This library provides a wrapper component with a familiar interface to media queries. The main advantage of this library ......
Read more >Developing responsive layouts with React Hooks
We are going to use React Hooks to create an elegant and, ... effect will cause this effect to only run when the...
Read more >Making Next.js work with react-responsive : r/reactjs - Reddit
I'm using next.js for SSR and I want a styling solution that allows me to use inline styles. I really like how `react-responsive`...
Read more >[Solved]-react-responsive-carousel messed up-Reactjs
React Responsive Carousel how to change text font size shown in top right corner of image? ... How do I make React js...
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 FreeTop 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
Top GitHub Comments
@benjycui https://github.com/Stupidism/antd-react-responsive-demo
Steps
git clone git@github.com:Stupidism/antd-react-responsive-demo.git
cd antd-react-responsive-demo && npm install
npm test
You will see two tests, one passes and one fails.@contra I’m sorry if my comment hurt your feelings, and yes I was wrong, I didn’t read through all both repo READMEs. What is misleading is the comment of one of the
react-media
collaborators, I don’t know if that was intentionally wrong, but I truly hope not. Obviously I’m not a member of the project, I’m only a potential user. If I may add, please don’t take it personal here on GH… I’d have appreciated if your comment simply pointed out the relevant section of thereact-responsive
README, and that’d have been a helpful reference for future readers of this issue too.P.