Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 11:21
    Praveencena88 commented #2319
  • 11:21
    Praveencena88 commented #2319
  • 06:47
    Praveencena88 commented #2319
  • 05:11
    ljharb commented #2319
  • 04:25
    Praveencena88 commented #2319
  • Jan 26 16:12
    ljharb labeled #2321
  • Jan 26 16:12
    ljharb commented #2321
  • Jan 26 16:11
    ljharb edited #2321
  • Jan 26 14:42
    hasannaqi9 opened #2321
  • Jan 26 11:29
    Flavien-Pensato commented #2273
  • Jan 26 05:12
    azuruce commented #2273
  • Jan 26 05:12
    azuruce commented #2273
  • Jan 25 01:01
    strawhatgami closed #2320
  • Jan 25 01:01
    strawhatgami commented #2320
  • Jan 24 21:46
    ljharb commented #2320
  • Jan 24 21:11
    strawhatgami commented #2320
  • Jan 24 20:14
    ljharb commented #2320
  • Jan 24 20:13
    ljharb labeled #2319
  • Jan 24 20:13
    ljharb labeled #2319
  • Jan 24 20:13
    ljharb commented #2319
Jordan Harband
@ljharb
at least, work well.
separately, don't use simulate.
also, you have to re-find the input from the root every time
the tests pass when you fix that one ^
Nisham
@nishammahsin
Thank you.
without simulate how can i call onchange.
can u explain
Jordan Harband
@ljharb
with .prop(‘onChange’)()
Pawan Gangwani
@pgangwani
Hello @ljharb , just a silly question (maybe):
dont we need to install enzyme-adapter-react-16 module explictly when I am installing latest enzyme & latest react?
we are doing some upgrades so need input
Jordan Harband
@ljharb
yes
Pawan Gangwani
@pgangwani
thanks @ljharb
Dan Green
@dangreenisrael

Hi @ljharb . We have recently (finally) gone through the upgrade to the latest version of React and people are having a hard time testing hooks using Enzyme. After reading through this, I see that

react doesn't provide the needed functionality for enzyme to work with hooks.
at least, work well

Do you foresee a future where Enzyme does work well with hooks?

If not, do you have any recommendations for how we should move forward?

n.b. Thanks so much for your hard work on this awesome project, it has brought us a ton of value and helped countless developers to write better tests.

Jordan Harband
@ljharb
yes, depending on it the rest team puts effort into making them testable
you can test most hooks with shallow and all hooks with mount, afaik
Dan Green
@dangreenisrael
Awesome, thanks. We were running into some very unclear warnings about act, but my guess is it's because we're using nock. Thanks!
Sarbast Mohammed
@SarKurd
is there a way to test a method inside functional components
const foo = () => {
const [state, setState] = useState(null);

const setChanges = (name) =>{ //test this
//do something to the name
setState(changedName)
}
return <div>hi<div/>
}
ray1345
@ray1345
Hi
ray1345
@ray1345
Nick
Nick
Nock
Jordan Harband
@ljharb
how can i help you
do you have a question about enzyme?
Gaurang Patel
@g-patel
@ljharb Is there a way I can find list of supported css pseudo selectors? I can't seem to find is in the official docs. I saw a PR from a while ago that added :first-child, :last-child, etc, so I wonder if there is anything beyond those basic pseudo selectors that are supported?
Gaurang Patel
@g-patel
Here's that MR that I was referring to: airbnb/enzyme#1537
Jordan Harband
@ljharb
@g-patel it's part of the http://npmjs.com/rst-selector-parser package mostly, but no i don't think there's an exhaustive list in the docs
cphoover
@cphoover

Hello... I'm having some annoying issues with using enzyme and with hooks particularly the useEffect hook

const callSomeAPI = () => new Promise(res => setTimeout(res, 1000, 7));

const MyComponent = () => {
  const [myLuckyNumber, setMyLuckyNumber] = useState();

  useEffect(() => {
    (async () => {
      const res = await callSomeAPI();
      setMyLuckyNumber(res);
    })();
  });

  return <div>My Lucky Number is: {myLuckyNumber}</div>;
};  
describe('MyComponent', () => {
  it.only('fetches the lucky number from fake service', async () => {
    jest.useFakeTimers();
    const wrapper = mount(<MyComponent />);
    jest.advanceTimersByTime(5000);
    wrapper.update();
    console.log('wrapper.debug++', wrapper.debug());
    expect(wrapper.find('div').text()).toBe('My Lucky Number is: 7');
  });

results in

   Warning: An update to MyComponent inside a test was not wrapped in act(...).
    Expected: "My Lucky Number is: 7"
    Received: "My Lucky Number is: "

Now If I wrap the mount in act and call wrapper.update after the fact it works:

describe('MyComponent', () => {
  it.only('fetches the lucky number from fake service', async () => {
    jest.useFakeTimers();
    let wrapper;
    await act(async () => {
      wrapper = mount(<MyComponent />);
      jest.advanceTimersByTime(5000);
    });
    wrapper.update();
    console.log('wrapper.debug++', wrapper.debug());
    expect(wrapper.find('div').text()).toBe('My Lucky Number is: 7');
  });
});

The annoying the about the code above is it's ugly. It requires declaring wrapper as let because act doesn't return the mounted component. On top of that I have to call update afterwards. Isn't it assumed when I mount the component I want the side effects to run? Shouldn't their be a convenient way of doing this that is built in that looks cleaner than above?

Jordan Harband
@ljharb
the advanceTimers part needs to be wrapped in act; i don't think the mount does
oh i see what you're asking tho
are you using the newest version of enzyme and enzyme-adapter-react-16?
cphoover
@cphoover
Yes
@ljharb what If I'm not using timers though but an api or something else
Jordan Harband
@ljharb
so, this is complicated by react not providing any testing hooks into hooks
iow, the same thing as a class component Just Works
cphoover
@cphoover
cat package.json | rg enzyme
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
Jordan Harband
@ljharb
try 1.15.2 of the adapter
and 3.11.0 of enzyme
cphoover
@cphoover
will it work without the call to act?
If I upgrade?
Because it's working now it's just ugly
IMO
Jordan Harband
@ljharb
it's possible that it will, tyes
without the timers or the act
cphoover
@cphoover
@ljharb Ok I'll give it a try and let you know
Jordan Harband
@ljharb
thanks. if it still doesn't work, please do file an issue with your code and i'll get to it!
cphoover
@cphoover
@ljharb it still doesn't work I'll create a ticket
Jordan Harband
@ljharb
thanks
mdhari
@mdhari
Hi folks, if I have a component structure like <MyComponent> <Modal footer= { Button onClick={() => this.setState({closeModal: true}} /> /> />, is there a way to ShallowWrap the Button? Right now I shallow MyComponent, but I can't reach the button
mdhari
@mdhari
ah, i can pass in the footer directly into shallow it seems, figured it out, thanks!
Jordan Harband
@ljharb
yep :-)
at some point we might have a method like .wrapProp('footer') but not atm
Kevin Seabourne
@kevinseabourne
how do i test methods in a functional react component ?