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.

Using with react-responsive. antd cause react-responsive failure

See original GitHub issue

Version

3.0.1

Environment

jest test environment

Reproduction link

antd-react-responsive-demo

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:closed
  • Created 6 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Stupidismcommented, Dec 14, 2017

@benjycui https://github.com/Stupidism/antd-react-responsive-demo

Steps

  1. git clone git@github.com:Stupidism/antd-react-responsive-demo.git
  2. cd antd-react-responsive-demo && npm install
  3. npm test You will see two tests, one passes and one fails.
 FAIL  src/App1.test.js
  ● <MediaQuery />

    expect(received).toBe(expected)

    Expected value to be (using ===):
      "You are a desktop or laptop"
    Received:
      ""

      at Object.<anonymous>.test (src/App1.test.js:16:26)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

 PASS  src/App.test.js

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        1.355s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

0reactions
pfurinicommented, Mar 18, 2019

@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 the react-responsive README, and that’d have been a helpful reference for future readers of this issue too.

P.

Read more comments on GitHub >

github_iconTop 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 >

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