Open namgold opened 2 years ago
I found that if I add an additional call component.update()
before querying the value, Enzyme's snapshot tree have been updated and it returns value corrected.
Update: Even when I using component.update()
's callback, it still does not work. But noticable thing here that the component was actual received the value, rendered the new value but somehow the component
wrapper does not update the snapshot.
My code:
index.js
:
import React, { useEffect, useState } from "react";
export const MyComponent = (props) => {
const [val, setVal] = useState(0);
useEffect(() => {
setVal(props.value);
console.log("MyComponent have received new value:", props.value);
}, [props.value]);
console.log("MyComponent is rendering with val =", val);
return <div value={val} />;
};
index.test.js
:
import React from "react";
import { MyComponent } from ".";
import { mount, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
it("should work", () => {
const component = mount(<MyComponent value={10} />);
component.setProps({ value: 4 });
expect(component.find("div").prop("value")).toEqual(4);
});
it("callback should work too", () => {
const component = mount(<MyComponent value={10} />);
component.setProps({ value: 4 }, () => {
expect(component.find("div").prop("value")).toEqual(4);
});
});
it("why does it need .update() to be called?", () => {
const component = mount(<MyComponent value={10} />);
component.setProps({ value: 4 });
component.update();
expect(component.find("div").prop("value")).toEqual(4);
});
it("even with .update(), callback does not worked", () => {
const component = mount(<MyComponent value={10} />);
component.setProps({ value: 4 }, () => {
component.update();
expect(component.find("div").prop("value")).toEqual(4);
});
});
Current behavior
I have 2 files below
index.js
:index.test.js
:See more here: https://codesandbox.io/s/7zjfo?file=/index.test.js
Expected behavior
The test goes success, the prop
value
that childdiv
should received should be updated to4
instead of remaining10
.Current behavior
It remains 10. As my exploiting, the
useEffect
is working and theval
state is updated to4
. So the div should be received4
. But when getting value from the.find().prop()
it does not updated but remains old value10
. So I think this could be bug from enzyme adapter as it revert any changes fromuseState
(?, I'm not sure).Your environment
API
Version
Adapter