Skip to content

Commit

Permalink
Add useCallback tests in shallow wrapper test suite
Browse files Browse the repository at this point in the history
Note that the `get same callback when using `useCallback` and rerender with same prop in dependencies` is skipped because react shallow renderer doesn't memoize callback function value. Will open an issue in react.
  • Loading branch information
chenesan committed May 30, 2019
1 parent 6850608 commit 5cc14ba
Showing 1 changed file with 39 additions and 0 deletions.
39 changes: 39 additions & 0 deletions packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
lazy,
PureComponent,
Suspense,
useCallback,
useEffect,
useMemo,
useLayoutEffect,
Expand Down Expand Up @@ -1247,6 +1248,44 @@ describe('shallow', () => {
const nextValue = wrapper.find(Child).prop('memoized');
expect(initialValue).to.not.equal(nextValue);
});

it.skip('get same callback when using `useCallback` and rerender with same prop in dependencies', () => {
function Child() {
return false;
}
function ComponentUsingCallbackHook(props) {
const { onChange } = props;
const callback = useCallback(value => onChange(value), [onChange]);
return (
<Child callback={callback} />
);
}
const onChange = () => { };
const wrapper = shallow(<ComponentUsingCallbackHook onChange={onChange} />);
const initialCallback = wrapper.find(Child).prop('callback');
wrapper.setProps({ unRelatedProp: '123' });
const nextCallback = wrapper.find(Child).prop('callback');
expect(initialCallback).to.equal(nextCallback);
});

it('get different callback when using `useCallback` and rerender with different prop in dependencies', () => {
function Child() {
return false;
}
function ComponentUsingCallbackHook(props) {
const { onChange, relatedProp } = props;
const callback = useCallback(value => onChange(value), [onChange, relatedProp]);
return (
<Child callback={callback} />
);
}
const onChange = () => { };
const wrapper = shallow(<ComponentUsingCallbackHook onChange={onChange} relatedProp="456" />);
const initialCallback = wrapper.find(Child).prop('callback');
wrapper.setProps({ relatedProp: '123' });
const nextCallback = wrapper.find(Child).prop('callback');
expect(initialCallback).to.not.equal(nextCallback);
});
});

itIf(is('>= 16.2'), 'does not support fragments', () => {
Expand Down

0 comments on commit 5cc14ba

Please sign in to comment.