Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 03:54
    idangozlan commented #2202
  • Sep 20 15:44
    KenLui commented #2176
  • Sep 20 14:43
    twharmon commented #2176
  • Sep 20 09:18
    joelshea closed #2213
  • Sep 20 09:18
    joelshea commented #2213
  • Sep 20 08:40
    skyboyer commented #2011
  • Sep 20 07:46
    charesbast commented #2011
  • Sep 19 23:41
    dannytatom closed #2209
  • Sep 19 23:41
    dannytatom commented #2209
  • Sep 19 23:32
    sahithikol commented #2212
  • Sep 19 23:32
    sahithikol commented #2212
  • Sep 19 23:31
    sahithikol commented #2212
  • Sep 19 23:03
    Bates550 commented #2209
  • Sep 19 18:23
    stephenh commented #952
  • Sep 19 15:32
    RaiVaibhav commented #1153
  • Sep 19 15:30
    RaiVaibhav commented #1153
  • Sep 19 14:02
    ljharb commented #2213
  • Sep 19 11:48
    shashank-ac commented #1246
  • Sep 19 11:04
    aditi-49 commented #2008
  • Sep 19 11:00
    scott-ln commented #2060
Arshazar
@Arshazar
wrapper = shallow(<MainPage { ...mockProps}/>);
TypeError: Cannot read property 'instance' of undefined
this 'instance' of undefined
instance is undefined
Jordan Harband
@ljharb
@arshazar what is MainPage?
SFCs don't have instances in react 16+, so i assume that error is coming from some other code in your test that you haven't shared. Can you share all of the code, redacting/simplifying none of it?
chaitu9916
@chaitu9916
Just would like to confirm --> Enzyme's shallow will not work with React's new context API? which in turn would mean Redux( > v6 when they switched to new React context) store would not be available to child components (Ex: <ReduxProvider>< /App></ ReduxProvider>) on Shallow ?
Jordan Harband
@ljharb
@chaitu9916 it will, but not the context methods
redux should work fine
chaitu9916
@chaitu9916
Doesn't redux useSelector in turn call useContext to access its store?
chaitu9916
@chaitu9916
Here is simple example Please check the tests tab - https://codesandbox.io/s/form-testing-ws9u9
Jordan Harband
@ljharb
i'm saying that useContext works in shallow
but that enzyme's context methods don't work with useContext
Stephen Hogan
@hogiyogi597
Hi everyone, is there a nice way to import mount or shallow for all of my tests? Like make it globally available?
Jordan Harband
@ljharb
@hogiyogi597 the nice way is an explicit import in every file. globals are gross.
Stephen Hogan
@hogiyogi597
Even for something that will be used in every test file basically? For example, describe and beforeEach are imported globally for jest files.
Jordan Harband
@ljharb
yes, and those BDD-style test framework globals are a huge antipattern
Stephen Hogan
@hogiyogi597
Ok! I mean I honestly don’t mind either way. A coworker wanted me to look into it since it would get tedious to import it for every test. I don’t really mind since IDEs make it so easy to add missing imports while coding. I’ll have to read up more on why it’s an anti pattern. That sounds interesting to learn about. :) Do you have any resources that you have found particularly well-written about this?
Jordan Harband
@ljharb
i don't, i'm afraid. but in general, any resources on why globals are bad - something that is a widely accepted axiom in the industry - should apply to test globals.
Stephen Hogan
@hogiyogi597
Is there a distinction between global variables and global functions being bad? I can see how global variables would be bad but not so sure why global functions would be considered bad besides the fact that it is harder to track down where they are coming. Admittedly, not being able to track down a function or variable is bad haha so I can see that being a huge reason to avoid doing it I was just wondering if there were other reasons specifically related to functions.
Jordan Harband
@ljharb
global everything is bad
Stephen Hogan
@hogiyogi597
haha
I understand. I am just trying to understand at a deeper level why.
Stephen Hogan
@hogiyogi597
Especially since in the airbnb/enzyme docs it says that you want to configure the enzyme adapter for react in a setup test file so that it is set up for all of your tests. This is where I got the idea in the first place. https://airbnb.io/enzyme/docs/installation/
Jordan Harband
@ljharb
configuring the adapter for everyone is one thing, that's global test setup
but you'll note all those docs have explicit imports of the enzyme methods :-)
Stephen Hogan
@hogiyogi597
Hmm ok I see the distinction :) Thanks for your responses
Jeff Hage
@jhage-accesso

Hey guys, hoping this is the right place to ask for help. I'm trying to simply render my component that's wrapped with redux compose, and test a function within the component class.

My export looks like this:

export default compose(
    withStyles(styles),
    withWidth(),
    connect<ReduxStateProps, OwnProps>(mapStateToProps)
)(ServiceDetailPanel);

and my test:

    it.only('should render as ServiceDetailPanel', () => {
        const wrapper = shallow<ServiceDetailPanelClass>(<ServiceDetailPanel />).dive();

        expect(wrapper.instance()).toBeInstanceOf(ServiceDetailPanel);
    });

I'm struggling to understand how to get access to my component to test its methods, its always null

Jordan Harband
@ljharb
you need one dive per HOC
you have 3 there, so you need 3 dives.
Jeff Hage
@jhage-accesso
I was thinking the same, but then it complains:
TypeError: ShallowWrapper::dive() can only be called on components

      12 |         const wrapper = shallow<ServiceDetailPanelClass>(<ServiceDetailPanel />)
      13 |             .dive()
    > 14 |             .dive()
         |              ^
      15 |             .dive();
      16 | 
      17 |         expect(wrapper.instance()).toBeInstanceOf(ServiceDetailPanel);
Jordan Harband
@ljharb
what does withStyles and withWidth do?
.dive() only works on a single custom component child; if withWidth wraps it in a div or something you'd need something a bit different
Jeff Hage
@jhage-accesso
All three just add props or classes to the original component
Jeff Hage
@jhage-accesso
Maybe not...

without any dives i get this:

const wrapper = shallow<ServiceDetailPanelClass>(<ServiceDetailPanel />);
wrapper.debug()
"<WithWidth(undefined) classes={{...}} />"

but then any wrapper.first().debug or html is "" empty string

would it show if there was an error within the component while trying to shallow render?
Jordan Harband
@ljharb
don't use .html(); .debug() is the interesting one
so the real question is, what does WithWidth do
ie, what's wrapper.shallow().debug()?
Jeff Hage
@jhage-accesso
wrapper.shallow().debug()
""
wrapper.debug()
"<WithWidth(undefined) classes={{...}} />"
Jordan Harband
@ljharb
hm, ok
then what's the actual source code for WithWidth?
Jeff Hage
@jhage-accesso
Thanks for spending time on this.
Jordan Harband
@ljharb
ah, material ui. there was an issue filed about this recently. if you're using the JS implementation of "Hidden" you have to polyfill media queries on top of jsdom
since jsdom doesn't support it otherwise.
Jeff Hage
@jhage-accesso
Thanks, that was it. Appreciate you taking the time!