-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
enzyme@3: wrapper is not updated even if there was a new render #1153
Comments
Wrappers are immutable in enzyme 3; this is in the migration docs. Try |
Already tried and now re-tried, same result. |
I'm also experiencing the same behaviour with the same deps on some of my component tests (non-HOC) where the state updates, but the wrapper does not, even after calling Placing console.log's in the component under tests render method show's things rendering correctly during the test, I just can't seem to assert properly after an |
I'm also experiencing the similar behavior when using conditional rendering, here is a reproduction repo https://github.com/yesmeck/enzyme-set-props-bug. |
I created a separate issue #1163. |
Same issue. I can confirm that render is running appropriately, and I can even get the updated values from |
Same issue here. |
I did some heave debugging for WordPress/gutenberg#2813 and it looks like we are having the same kind of issues that are reported in this thread and here. I tried to add recommended |
Confirmed what @gziolo said. The component is updated properly. |
This is hopefully fixed in |
This seems to still be an issue in enzyme-adapter-react-16@1.1.0 wrapper.update() does not work. Yet console logs in the source code show that state is being updated. .html() shows the correct structure. I can point you to a repo with the failing test if that helps. |
@mrbinky3000 |
ImageWithZoom has a state property named "hovering". It starts off false as expected.
This is a debug() dump of the wrapper before the mouseover event.
This is the .html() of the wrapper before the mouseover event is triggered.
This is a console log in the ImageWithZoom component to acknowledge that our mouseover method was called. It sets the state property "hovering" to true.
This console log is from the ImageWithZoom render method. It shows that the "hovering" state property is now true, as expected.
This .html() dump shows that the component has added the class 'carousel__zoom-image-overlay--hovering' in response to the state property "hovering" now being true.
However, Enzyme has not been updated to reflect the state change. The css class "carousel__zoom-image-overlay--hovering" is missing. Hence, my tests fail.
Here is the test. it('should add hovering classes to the overlay when mouse is hovering', () => {
expect(imageWithZoom.find('div.overlay').hasClass('hover')).toBe(false);
expect(imageWithZoom.find('div.overlay').hasClass('carousel__zoom-image-overlay--hovering')).toBe(false);
console.log('before mouseover debug:\n', imageWithZoom.debug());
console.log('before mouseover html:\n', imageWithZoom.html());
imageWithZoom.find('Wrapper.overlay').simulate('mouseover');
wrapper.update(); // doesn't matter if this is here or not, it still fails the test.
console.log('after mouseover html:\n', imageWithZoom.html());
console.log('after mouseover debug\n', imageWithZoom.debug());
expect(imageWithZoom.find('div.overlay').hasClass('hover')).toBe(true);
expect(imageWithZoom.find('div.overlay').hasClass('carousel__zoom-image-overlay--hovering')).toBe(true);
}); I made a branch in my repo that you can check out if you need it. |
@mrbinky3000 thanks; can you file this separately? |
This is (actually isn't ... see update below) still an issue in: In my case, component triggers a fetch in componentDidMount, which is mocked and confirmed to get triggered. Also tested component successfully re-renders during test.
----- UPDATE:
|
This no longer seems to be an issue for me in the following versions:
I had exactly the same issue with |
Same problem here. test.js
panel.js
|
Is this supposed to be fixed? I have this code: const wrapper = mount(<Component/>)
// simulate event
console.log(wrapper.html())
console.log('length', wrapper.find('.edit-choice').length) results: //html()
//includes element with className edit-choice
//wrapper.find()
//length 0 |
@maloguertin it's pretty hard to tell when you elide parts of the code; however it's likely that you need a |
This is an old issue that's very long, and there's been numerous updates since all of the comments. I'm going to close this, since it's not clear to me what's still broken. If you're still having trouble, please do file a new issue, with a clear repro step, filling out the template - and we'll get it addressed ASAP. |
Tried all suggestions here and didn't work. At the end updating to |
"react": "^16.4.1", same issue update |
@guofei0723 please file a new issue if you're having trouble. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
I see. But update() in itself isn't reflecting the state change made from a
simulated event. is there a workaround without using await? i have the most
recent versions:
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.3.5",
"jest": "^23.6.0",
…On Sun, Jan 6, 2019 at 2:49 AM Jordan Harband ***@***.***> wrote:
@pvanny1124 <https://github.com/pvanny1124> Note that doesn’t do what you
expect - you’re awaiting a non-promise, so all that does is adds an extra
tick. If that works for you, then all that means is that you’re winning
your race condition.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1153 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AZJcoYbpA8wICdaysdD5Gt-iCkARmGCQks5vAaqhgaJpZM4Pky8j>
.
|
also, here's the full code of what im doing:
it("does not create an account for a user if an error occured", async () =>
{
let fakeSignupErrorMethod = (last, first, email, password, auth_type,
school_code, school_license_key) => {
return new Promise((resolve, reject) => {
reject({ errors: [{message: "error"}] });
});
}
wrapper = shallow(
<Signup signupMethod={fakeSignupErrorMethod} />
);
signupWrapper = wrapper.at(1).shallow().dive();
await signupWrapper.find(".Submit").find(".Submit_Button").simulate('click'
);
await signupWrapper.update();
expect(signupWrapper.state("uiErrorMessages")).toEqual([ { message: "error"
} ]);
})
…On Sun, Jan 6, 2019 at 3:10 AM Patrick Vanegas ***@***.***> wrote:
I see. But update() in itself isn't reflecting the state change made from
a simulated event. is there a workaround without using await? i have the
most recent versions:
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.3.5",
"jest": "^23.6.0",
On Sun, Jan 6, 2019 at 2:49 AM Jordan Harband ***@***.***>
wrote:
> @pvanny1124 <https://github.com/pvanny1124> Note that doesn’t do what
> you expect - you’re awaiting a non-promise, so all that does is adds an
> extra tick. If that works for you, then all that means is that you’re
> winning your race condition.
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#1153 (comment)>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AZJcoYbpA8wICdaysdD5Gt-iCkARmGCQks5vAaqhgaJpZM4Pky8j>
> .
>
|
Whatever async stuff you’re doing in your component, you have to intercept in your tests so that you can reliably await that. If you have further questions, please file a new issue. |
I had a similar issue. I fixed it by the following replacement: const wrapper = mount(<Component />);
const button = wrapper.find('.button');
// Do some stuff with the button...
- button.update();
+ wrapper.update();
- expect(button.prop('type')).toEqual('foo');
+ expect(wrapper.find('.button').prop('type')).toEqual('foo'); The |
@Finesse yes, that's part of v3 - you always have to re-find from the root. |
I found something that works.
|
@Jlevett Calling |
@Finesse Thanks for the explanation. It's mention in the guide but getting a conclusion like this |
FWIW I was having the same issue. The I added the
|
I am having issue. could you help me please.
|
@guruusingh2033 i'd suggest avoiding |
@ljharb thanks for reading const wrapper = mount(
<Provider store={configureStore()}>
<IntlProvider
locale={currentAppLocale.locale}
messages={currentAppLocale.messages}
>
<MemoryRouter initialEntries={["/list"]}>
<ListPage match={{ url: "localhost:3000", path: "list" }} location={{ state: undefined }} />
</MemoryRouter>
</IntlProvider>
</Provider>
); How can I test async method of ListPage component/wrapper while I am not getting updated wrapper |
@guruusingh2033 for one, pass the Providers and MemoryRouter using |
Could you share any reference/link please ? |
See the API docs. |
Hi. Just faced this after updating to v3.
Given the following deps:
And the HOC:
And the test:
I see:
So the was a new render, but wrapper just didn't react to it. Works fine with v2.
Please correct me if I was wrong all this time and test should be written in another way.
The text was updated successfully, but these errors were encountered: