diff --git a/package.json b/package.json index 2c52a1a..09f2baa 100644 --- a/package.json +++ b/package.json @@ -37,32 +37,28 @@ "now-build": "npm run build" }, "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0" + "react": ">=18.0.0", + "react-dom": ">=18.0.0" }, "devDependencies": { "@rc-component/father-plugin": "^2.1.3", "@rc-component/np": "^1.0.4", "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^12.1.5", - "@types/enzyme": "^3.10.5", + "@testing-library/react": "^13.4.0", "@types/jest": "^30.0.0", "@types/node": "^24.10.1", "@types/react": "^18.0.8", "@types/react-dom": "^18.0.3", "@types/warning": "^3.0.0", - "cheerio": "1.0.0-rc.12", "dumi": "^2.2.17", - "enzyme": "^3.1.0", - "enzyme-adapter-react-16": "^1.15.6", "eslint": "^8.56.0", "eslint-plugin-unicorn": "^55.0.0", "father": "^4.4.0", "glob": "^7.1.6", "rc-animate": "^2.9.1", - "rc-test": "^7.0.15", - "react": "16.14.0", - "react-dom": "16.14.0", + "rc-test": "^7.1.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", "typescript": "^5.0.0" }, "dependencies": { diff --git a/tests/list.test.js b/tests/list.test.js index 25e56f8..d0317b6 100644 --- a/tests/list.test.js +++ b/tests/list.test.js @@ -1,49 +1,67 @@ +import '@testing-library/jest-dom'; +import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil'; +import { act, fireEvent, render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; import List from '../src'; -import Filler from '../src/Filler'; import { spyElementPrototypes } from './utils/domHook'; function genData(count) { return new Array(count).fill(null).map((_, id) => ({ id })); } -describe('List.Basic', () => { - function genList(props) { - let node = ( - - {({ id }) =>
  • {id}
    • } -     - ); +function genNode(props) { + return ( + + {({ id }) =>
  • {id}
    • } +     + ); +} + +function genList(props) { + return render(genNode(props)); +} + +function getHolder(container) { + return container.querySelector('.rc-virtual-list-holder'); +} - return mount(node); - } +function getInner(container) { + return container.querySelector('.rc-virtual-list-holder-inner'); +} + +function getFiller(container) { + return getInner(container).parentElement; +} + +function getOffsetY(container) { + const { transform } = getInner(container).style; + return Number(transform.match(/translateY\((\d+)px\)/)?.[1] || 0); +} +describe('List.Basic', () => { describe('raw', () => { it('without height', () => { - const wrapper = genList({ data: genData(1) }); - expect(wrapper.find(Filler).props().offset).toBeFalsy(); + const { container } = genList({ data: genData(1) }); + expect(getFiller(container)).not.toHaveStyle({ height: '1px' }); + expect(getInner(container).style.transform).toEqual(''); }); describe('height over itemHeight', () => { it('full height', () => { - const wrapper = genList({ data: genData(1), itemHeight: 1, height: 999 }); - expect(wrapper.find(Filler).props().offset).toBeFalsy(); - expect(wrapper.find('ul').props().style).toEqual(expect.objectContaining({ height: 999 })); + const { container } = genList({ data: genData(1), itemHeight: 1, height: 999 }); + expect(getFiller(container).style.height).toEqual(''); + expect(getHolder(container)).toHaveStyle({ height: '999px' }); }); it('without full height', () => { - const wrapper = genList({ + const { container } = genList({ data: genData(1), itemHeight: 1, height: 999, fullHeight: false, }); - expect(wrapper.find(Filler).props().offset).toBeFalsy(); - expect(wrapper.find('ul').props().style).toEqual( - expect.objectContaining({ maxHeight: 999 }), - ); + expect(getFiller(container).style.height).toEqual(''); + expect(getHolder(container)).toHaveStyle({ maxHeight: '999px' }); }); }); }); @@ -81,18 +99,21 @@ describe('List.Basic', () => { // scroll to top scrollTop = 0; - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), onVisibleChange }); - expect(wrapper.find(Filler).props().height).toEqual(2000); - expect(wrapper.find(Filler).props().offsetY).toEqual(0); + const { container } = genList({ + itemHeight: 20, + height: 100, + data: genData(100), + onVisibleChange, + }); + expect(getFiller(container)).toHaveStyle({ height: '2000px' }); + expect(getOffsetY(container)).toEqual(0); onVisibleChange.mockReset(); // scrollTop to end scrollTop = 2000 - 100; - wrapper.find('ul').simulate('scroll', { - scrollTop, - }); - expect(wrapper.find(Filler).props().height).toEqual(2000); - expect(wrapper.find(Filler).props().offsetY + wrapper.find('li').length * 20).toEqual(2000); + fireEvent.scroll(getHolder(container)); + expect(getFiller(container)).toHaveStyle({ height: '2000px' }); + expect(getOffsetY(container) + container.querySelectorAll('li').length * 20).toEqual(2000); expect(onVisibleChange.mock.calls[0][0]).toHaveLength(6); expect(onVisibleChange.mock.calls[0][1]).toHaveLength(100); @@ -132,39 +153,44 @@ describe('List.Basic', () => { it('raw to virtual', () => { let data = genData(5); - const wrapper = genList({ itemHeight: 20, height: 100, data }); + const { container, rerender } = genList({ itemHeight: 20, height: 100, data }); - expect(wrapper.find('li')).toHaveLength(5); + expect(container.querySelectorAll('li')).toHaveLength(5); data = genData(10); - wrapper.setProps({ data }); - expect(wrapper.find('li').length < data.length).toBeTruthy(); + rerender(genNode({ itemHeight: 20, height: 100, data })); + expect(container.querySelectorAll('li').length < data.length).toBeTruthy(); }); it('virtual to raw', () => { let data = genData(10); - const wrapper = genList({ itemHeight: 20, height: 100, data }); - expect(wrapper.find('li').length < data.length).toBeTruthy(); + const { container, rerender } = genList({ itemHeight: 20, height: 100, data }); + expect(container.querySelectorAll('li').length < data.length).toBeTruthy(); data = data.slice(0, 2); - wrapper.setProps({ data }); - expect(wrapper.find('li')).toHaveLength(2); + rerender(genNode({ itemHeight: 20, height: 100, data })); + expect(container.querySelectorAll('li')).toHaveLength(2); // Should not crash if data count change data = data.slice(0, 1); - wrapper.setProps({ data }); - expect(wrapper.find('li')).toHaveLength(1); + rerender(genNode({ itemHeight: 20, height: 100, data })); + expect(container.querySelectorAll('li')).toHaveLength(1); }); }); it('`virtual` is false', () => { - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), virtual: false }); - expect(wrapper.find('li')).toHaveLength(100); + const { container } = genList({ + itemHeight: 20, + height: 100, + data: genData(100), + virtual: false, + }); + expect(container.querySelectorAll('li')).toHaveLength(100); }); it('Should not crash when height change makes virtual scroll to be raw scroll', () => { - const wrapper = genList({ itemHeight: 20, height: 40, data: genData(3) }); - wrapper.setProps({ height: 1000 }); + const { rerender } = genList({ itemHeight: 20, height: 40, data: genData(3) }); + rerender(genNode({ itemHeight: 20, height: 1000, data: genData(3) })); }); describe('should collect height', () => { @@ -192,24 +218,25 @@ describe('List.Basic', () => { }); it('work', async () => { - const wrapper = genList({ itemHeight: 20, height: 40, data: genData(3) }); - wrapper.find('Filler').find('ResizeObserver').props().onResize({ offsetHeight: 0 }); - expect(collected).toBeFalsy(); + const { container } = genList({ itemHeight: 20, height: 40, data: genData(3) }); + collected = false; - // Wait for collection await act(async () => { - await new Promise((resolve) => { - setTimeout(resolve, 10); - }); + onLibResize([ + { + target: getInner(container), + }, + ]); + + await Promise.resolve(); }); - wrapper.find('Filler').find('ResizeObserver').props().onResize({ offsetHeight: 100 }); expect(collected).toBeTruthy(); }); }); it('innerProps', () => { - const wrapper = genList({ + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100), @@ -220,12 +247,12 @@ describe('List.Basic', () => { }, }); - expect(wrapper.find('div#my_list').prop('role')).toEqual('listbox'); + expect(container.querySelector('div#my_list')).toHaveAttribute('role', 'listbox'); }); it('nativeElement', () => { const ref = React.createRef(); - const wrapper = genList({ data: genData(1), ref }); - expect(ref.current.nativeElement).toBe(wrapper.getDOMNode()); + const { container } = genList({ data: genData(1), ref }); + expect(ref.current.nativeElement).toBe(container.firstChild); }); }); diff --git a/tests/mock.test.js b/tests/mock.test.js index 1d53354..65a9e48 100644 --- a/tests/mock.test.js +++ b/tests/mock.test.js @@ -1,27 +1,21 @@ +import { render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; import MockList from '../src/mock'; -import Filler from '../src/Filler'; describe('MockList', () => { it('correct render', () => { - const wrapper = mount( + const { container } = render( id}> {id => {id}} , ); - expect(wrapper.find(Filler).length).toBeTruthy(); - - for (let i = 0; i < 3; i += 1) { - expect( - wrapper - .find('Item') - .at(i) - .key(), - ).toBe(String(i)); - } - - expect(wrapper.find('List')).toHaveLength(1); + expect(container.querySelector('.rc-virtual-list-holder-inner')).toBeTruthy(); + expect(Array.from(container.querySelectorAll('span')).map(node => node.textContent)).toEqual([ + '0', + '1', + '2', + ]); + expect(container.querySelector('.rc-virtual-list')).toBeTruthy(); }); }); diff --git a/tests/props.test.js b/tests/props.test.js index bbc41e8..1b251bb 100644 --- a/tests/props.test.js +++ b/tests/props.test.js @@ -1,5 +1,5 @@ +import { render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; import List from '../src'; describe('Props', () => { @@ -10,44 +10,33 @@ describe('Props', () => { } } - const wrapper = mount( + const { container } = render( item.id}> {({ id }) => {id}} , ); - expect( - wrapper - .find('Item') - .at(0) - .key(), - ).toBe('903'); - - expect( - wrapper - .find('Item') - .at(1) - .key(), - ).toBe('1128'); + expect(container.textContent).toEqual('9031128'); }); it('prefixCls', () => { - const wrapper = mount( + const { container } = render( id} prefixCls="prefix"> {id =>
    {id}
    }     , ); - expect(wrapper.find('.prefix-holder-inner').length).toBeTruthy(); + expect(container.querySelector('.prefix-holder-inner')).toBeTruthy(); }); it('offsetX in renderFn', () => { let scrollLeft; - mount( + render( id} prefixCls="prefix"> - {(id, _, { offsetX }) => { + {(id, _, { offsetX }) => { scrollLeft = offsetX; - return
    {id}
    }} + return
    {id}
    ; + }}     , ); diff --git a/tests/scroll-Firefox.test.js b/tests/scroll-Firefox.test.js index 2a9290e..59ee331 100644 --- a/tests/scroll-Firefox.test.js +++ b/tests/scroll-Firefox.test.js @@ -1,6 +1,5 @@ import React from 'react'; -import { act } from 'react-dom/test-utils'; -import { mount } from 'enzyme'; +import { act, render } from '@testing-library/react'; import { spyElementPrototypes } from './utils/domHook'; import List from '../src'; import isFF from '../src/utils/isFirefox'; @@ -38,17 +37,13 @@ describe('List.Firefox-Scroll', () => { }); function genList(props) { - let node = ( + const node = ( {({ id }) =>
  • {id}
    • }     ); - if (props.ref) { - node =
    {node}
    ; - } - - return mount(node); + return render(node); } it('should be true', () => { @@ -59,8 +54,8 @@ describe('List.Firefox-Scroll', () => { it('FireFox should patch scroll speed', () => { const wheelPreventDefault = jest.fn(); const firefoxPreventDefault = jest.fn(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); - const ulElement = wrapper.find('ul').instance(); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const ulElement = container.querySelector('ul'); act(() => { const wheelEvent = new Event('wheel'); @@ -87,8 +82,8 @@ describe('List.Firefox-Scroll', () => { it('should call preventDefault on MozMousePixelScroll', () => { const preventDefault = jest.fn(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); - const ulElement = wrapper.find('ul').instance(); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const ulElement = container.querySelector('ul'); act(() => { const event = new Event('MozMousePixelScroll'); @@ -104,8 +99,8 @@ describe('List.Firefox-Scroll', () => { it('should not call preventDefault on MozMousePixelScroll when scrolling up at top boundary', () => { const preventDefault = jest.fn(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); - const ulElement = wrapper.find('ul').instance(); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const ulElement = container.querySelector('ul'); act(() => { const event = new Event('MozMousePixelScroll'); @@ -121,12 +116,14 @@ describe('List.Firefox-Scroll', () => { it('should not call preventDefault on MozMousePixelScroll when scrolling down at bottom boundary', () => { const preventDefault = jest.fn(); const listRef = React.createRef(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef }); - const ulElement = wrapper.find('ul').instance(); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef }); + const ulElement = container.querySelector('ul'); // scroll to bottom - listRef.current.scrollTo(99999); - jest.runAllTimers(); - expect(wrapper.find('ul').instance().scrollTop).toEqual(1900); + act(() => { + listRef.current.scrollTo(99999); + jest.runAllTimers(); + }); + expect(container.querySelector('ul').scrollTop).toEqual(1900); act(() => { const event = new Event('MozMousePixelScroll'); diff --git a/tests/scroll.test.js b/tests/scroll.test.js index 5423ab3..b156a78 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { act, createEvent, fireEvent, render } from '@testing-library/react'; -import { mount } from 'enzyme'; import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil'; import { resetWarned } from '@rc-component/util/lib/warning'; import React from 'react'; @@ -11,6 +10,25 @@ function genData(count) { return new Array(count).fill(null).map((_, index) => ({ id: String(index) })); } +function genNode(props) { + const mergedProps = { + component: 'ul', + itemKey: 'id', + children: ({ id }) =>
  • {id}
    • , + ...props, + }; + + return ; +} + +function getHolder(container) { + return container.querySelector('.rc-virtual-list-holder'); +} + +function getScrollOffset(container) { + return Number(container.querySelector('[data-dev-offset]')?.getAttribute('data-dev-offset')); +} + // Mock ScrollBar jest.mock('../src/ScrollBar', () => { const OriScrollBar = jest.requireActual('../src/ScrollBar').default; @@ -74,30 +92,20 @@ describe('List.Scroll', () => { jest.useRealTimers(); }); - function genList(props, func = mount) { - const mergedProps = { - component: 'ul', - itemKey: 'id', - children: ({ id }) =>
  • {id}
    • , - ...props, - }; - let node = ; - - if (props.ref) { - node =
    {node}
    ; - } - - return func(node); + function genList(props) { + return render(genNode(props)); } it('scrollTo null will show the scrollbar', () => { jest.useFakeTimers(); const listRef = React.createRef(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef }); - jest.runAllTimers(); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef }); + act(() => { + jest.runAllTimers(); + listRef.current.scrollTo(null); + }); - listRef.current.scrollTo(null); - expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.display).not.toEqual( + expect(container.querySelector('.rc-virtual-list-scrollbar-thumb').style.display).not.toEqual( 'none', ); jest.useRealTimers(); @@ -106,18 +114,25 @@ describe('List.Scroll', () => { describe('scrollTo number', () => { it('value scroll', () => { const listRef = React.createRef(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef }); - listRef.current.scrollTo(903); - jest.runAllTimers(); - expect(wrapper.find('ul').instance().scrollTop).toEqual(903); + const { container, unmount } = genList({ + itemHeight: 20, + height: 100, + data: genData(100), + ref: listRef, + }); + act(() => { + listRef.current.scrollTo(903); + jest.runAllTimers(); + }); + expect(container.querySelector('ul').scrollTop).toEqual(903); - wrapper.unmount(); + unmount(); }); it('passes current scrollTop to extraRender', () => { const listRef = React.createRef(); const extraRender = jest.fn(() => null); - const wrapper = genList({ + const { unmount } = genList({ itemHeight: 20, height: 100, data: genData(100), @@ -125,9 +140,10 @@ describe('List.Scroll', () => { extraRender, }); - listRef.current.scrollTo(80); - jest.runAllTimers(); - wrapper.update(); + act(() => { + listRef.current.scrollTo(80); + jest.runAllTimers(); + }); expect(extraRender).toHaveBeenLastCalledWith( expect.objectContaining({ @@ -135,7 +151,7 @@ describe('List.Scroll', () => { }), ); - wrapper.unmount(); + unmount(); }); }); @@ -143,15 +159,14 @@ describe('List.Scroll', () => { function presetList() { const ref = React.createRef(); - const result = genList({ itemHeight: 20, height: 100, data: genData(100), ref }, render); + const result = genList({ itemHeight: 20, height: 100, data: genData(100), ref }); return { ...result, ref, scrollTo: (...args) => { - ref.current.scrollTo(...args); - act(() => { + ref.current.scrollTo(...args); jest.runAllTimers(); }); }, @@ -216,8 +231,8 @@ describe('List.Scroll', () => { it('inject wheel', () => { const preventDefault = jest.fn(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); - const ulElement = wrapper.find('ul').instance(); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const ulElement = container.querySelector('ul'); act(() => { const wheelEvent = new Event('wheel'); @@ -234,21 +249,29 @@ describe('List.Scroll', () => { describe('scrollbar', () => { it('moving', () => { const listRef = React.createRef(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef }); + const { container } = genList({ + itemHeight: 20, + height: 100, + data: genData(100), + ref: listRef, + }); // Mouse down - wrapper.find('.rc-virtual-list-scrollbar-thumb').simulate('mousedown', { - pageY: 0, + act(() => { + const thumb = container.querySelector('.rc-virtual-list-scrollbar-thumb'); + const mouseDownEvent = createEvent.mouseDown(thumb); + Object.defineProperty(mouseDownEvent, 'pageY', { value: 0 }); + fireEvent(thumb, mouseDownEvent); }); // Mouse move act(() => { - const mouseMoveEvent = new Event('mousemove'); - mouseMoveEvent.pageY = 10; + const mouseMoveEvent = new MouseEvent('mousemove'); + Object.defineProperty(mouseMoveEvent, 'pageY', { value: 10 }); window.dispatchEvent(mouseMoveEvent); }); - expect(wrapper.find('.rc-virtual-list-holder').props().style.pointerEvents).toEqual('none'); + expect(getHolder(container).style.pointerEvents).toEqual('none'); act(() => { jest.runAllTimers(); @@ -260,7 +283,7 @@ describe('List.Scroll', () => { window.dispatchEvent(mouseUpEvent); }); - expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy(); + expect(container.querySelector('ul').scrollTop > 0).toBeTruthy(); }); it('should show scrollbar when element has showScrollBar prop set to true', () => { @@ -273,8 +296,7 @@ describe('List.Scroll', () => { data: genData(100), ref: listRef, showScrollBar: true, - }, - render, + } ); act(() => { jest.runAllTimers(); @@ -295,28 +317,28 @@ describe('List.Scroll', () => { }, ].forEach(({ name, props }) => { it(name, () => { - const wrapper = genList({ + const { container } = genList({ itemHeight: 20, height: 100, data: genData(5), ...props, }); - expect(wrapper.find('.rc-virtual-list-scrollbar-thumb')).toHaveLength(0); + expect(container.querySelector('.rc-virtual-list-scrollbar-thumb')).toBeFalsy(); }); }); }); }); it('no bubble', () => { - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); // Mouse down const preventDefault = jest.fn(); const stopPropagation = jest.fn(); - wrapper.find('.rc-virtual-list-scrollbar').simulate('mousedown', { - preventDefault, - stopPropagation, - }); + const event = createEvent.mouseDown(container.querySelector('.rc-virtual-list-scrollbar')); + event.preventDefault = preventDefault; + event.stopPropagation = stopPropagation; + fireEvent(container.querySelector('.rc-virtual-list-scrollbar'), event); expect(preventDefault).toHaveBeenCalled(); expect(stopPropagation).toHaveBeenCalled(); @@ -328,16 +350,17 @@ describe('List.Scroll', () => { const onScroll = jest.fn((e) => { ({ currentTarget } = e); }); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), onScroll }); - wrapper.find('.rc-virtual-list-holder').simulate('scroll'); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100), onScroll }); + const holder = getHolder(container); + fireEvent.scroll(holder); - expect(currentTarget).toBe(wrapper.find('.rc-virtual-list-holder').hostNodes().instance()); + expect(currentTarget).toBe(holder); }); describe('scroll should in range', () => { it('less than 0', () => { - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); - const ulElement = wrapper.find('ul').instance(); + const { container, rerender } = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const ulElement = container.querySelector('ul'); act(() => { const wheelEvent = new Event('wheel'); @@ -347,26 +370,20 @@ describe('List.Scroll', () => { jest.runAllTimers(); }); - wrapper.setProps({ data: genData(1) }); + rerender(genNode({ itemHeight: 20, height: 100, data: genData(1) })); act(() => { - wrapper - .find('.rc-virtual-list-holder') - .props() - .onScroll({ - currentTarget: { - scrollTop: 0, - }, - }); + getHolder(container).scrollTop = 0; + fireEvent.scroll(getHolder(container)); }); - wrapper.setProps({ data: genData(100) }); + rerender(genNode({ itemHeight: 20, height: 100, data: genData(100) })); - expect(wrapper.find('ScrollBar').props().scrollOffset).toEqual(0); + expect(getScrollOffset(container)).toEqual(0); }); it('over max height', () => { - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); - const ulElement = wrapper.find('ul').instance(); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const ulElement = container.querySelector('ul'); act(() => { const wheelEvent = new Event('wheel'); @@ -376,14 +393,16 @@ describe('List.Scroll', () => { jest.runAllTimers(); }); - wrapper.update(); - - expect(wrapper.find('ScrollBar').props().scrollOffset).toEqual(1900); + expect(getScrollOffset(container)).toEqual(1900); }); it('dynamic large to small', () => { - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(1000) }); - const ulElement = wrapper.find('ul').instance(); + const { container, rerender } = genList({ + itemHeight: 20, + height: 100, + data: genData(1000), + }); + const ulElement = container.querySelector('ul'); // To bottom act(() => { @@ -395,34 +414,34 @@ describe('List.Scroll', () => { }); // Cut data len - wrapper.setProps({ - data: genData(20), - }); + rerender(genNode({ itemHeight: 20, height: 100, data: genData(20) })); - expect(wrapper.find('li').length).toBeLessThan(10); + expect(container.querySelectorAll('li').length).toBeLessThan(10); }); }); it('scrollbar should be left position with rtl', () => { jest.useFakeTimers(); const listRef = React.createRef(); - const wrapper = genList({ + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef, direction: 'rtl', }); - jest.runAllTimers(); + act(() => { + jest.runAllTimers(); + listRef.current.scrollTo(null); + }); - listRef.current.scrollTo(null); - expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.display).not.toEqual( + expect(container.querySelector('.rc-virtual-list-scrollbar-thumb').style.display).not.toEqual( 'none', ); - expect(wrapper.find('.rc-virtual-list-scrollbar').props().style.left).toEqual(0); + expect(container.querySelector('.rc-virtual-list-scrollbar').style.left).toEqual('0px'); jest.useRealTimers(); - expect(wrapper.exists('.rc-virtual-list-rtl')).toBeTruthy(); + expect(container.querySelector('.rc-virtual-list-rtl')).toBeTruthy(); }); it('wheel horizontal', () => { diff --git a/tests/scrollWidth.test.tsx b/tests/scrollWidth.test.tsx index fbbe203..2232632 100644 --- a/tests/scrollWidth.test.tsx +++ b/tests/scrollWidth.test.tsx @@ -230,10 +230,14 @@ describe('List.scrollWidth', () => { ref: listRef, }); - listRef.current.scrollTo({ left: 135 }); + act(() => { + listRef.current.scrollTo({ left: 135 }); + }); expect(listRef.current.getScrollInfo()).toEqual({ x: 135, y: 0 }); - listRef.current.scrollTo({ left: -99 }); + act(() => { + listRef.current.scrollTo({ left: -99 }); + }); expect(listRef.current.getScrollInfo()).toEqual({ x: 0, y: 0 }); }); diff --git a/tests/touch.test.js b/tests/touch.test.js index fa62a6a..d0a5072 100644 --- a/tests/touch.test.js +++ b/tests/touch.test.js @@ -1,5 +1,4 @@ import { act, fireEvent, render } from '@testing-library/react'; -import { mount } from 'enzyme'; import React from 'react'; import List from '../src'; import { spyElementPrototypes } from './utils/domHook'; @@ -50,53 +49,51 @@ describe('List.Touch', () => { }); function genList(props) { - let node = ( + const node = ( {({ id }) =>
  • {id}
    • }     ); - if (props.ref) { - node =
    {node}
    ; - } - - return mount(node); + return render(node); } describe('touch content', () => { it('touch scroll should work', () => { - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const { container, unmount } = genList({ itemHeight: 20, height: 100, data: genData(100) }); function getElement() { - return wrapper.find('.rc-virtual-list-holder').instance(); + return container.querySelector('.rc-virtual-list-holder'); } - // start - const touchEvent = new Event('touchstart'); - touchEvent.touches = [{ pageY: 100 }]; - getElement().dispatchEvent(touchEvent); + act(() => { + // start + const touchEvent = new Event('touchstart'); + touchEvent.touches = [{ pageY: 100 }]; + getElement().dispatchEvent(touchEvent); - // move - const moveEvent = new Event('touchmove'); - moveEvent.touches = [{ pageY: 90 }]; - getElement().dispatchEvent(moveEvent); + // move + const moveEvent = new Event('touchmove'); + moveEvent.touches = [{ pageY: 90 }]; + getElement().dispatchEvent(moveEvent); - // end - const endEvent = new Event('touchend'); - getElement().dispatchEvent(endEvent); + // end + const endEvent = new Event('touchend'); + getElement().dispatchEvent(endEvent); - // smooth - jest.runAllTimers(); - expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy(); + // smooth + jest.runAllTimers(); + }); + expect(container.querySelector('ul').scrollTop > 10).toBeTruthy(); - wrapper.unmount(); + unmount(); }); it('not call when not scroll-able', () => { - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); function getElement() { - return wrapper.find('.rc-virtual-list-holder').instance(); + return container.querySelector('.rc-virtual-list-holder'); } // start @@ -115,7 +112,9 @@ describe('List.Touch', () => { expect(preventDefault).toHaveBeenCalled(); // ======= Not call since scroll to the bottom ======= - jest.runAllTimers(); + act(() => { + jest.runAllTimers(); + }); preventDefault.mockReset(); // start @@ -135,11 +134,11 @@ describe('List.Touch', () => { it('should container preventDefault', () => { const preventDefault = jest.fn(); - const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) }); + const { container } = genList({ itemHeight: 20, height: 100, data: genData(100) }); const touchEvent = new Event('touchstart'); touchEvent.preventDefault = preventDefault; - wrapper.find('.rc-virtual-list-scrollbar').instance().dispatchEvent(touchEvent); + container.querySelector('.rc-virtual-list-scrollbar').dispatchEvent(touchEvent); expect(preventDefault).toHaveBeenCalled(); });