ant-design/ca911b2d-async.4627388c.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["ca911b2d"],{ca911b2d:function(e,a,n){"use strict";n.d(a,"__esModule",{value:!0}),n.d(a,"texts",{enumerable:!0,get:function(){return t;}}),n("d18b8cbb");let t=[{value:"\u5927\u5BB6\u597D\uFF0C\u6211\u662F ",paraId:0},{value:"@li-jia-nan",paraId:0},{value:"\u3002\u4E5F\u662F\u524D\u51E0\u4E2A\u6708\u65B0\u52A0\u5165 antd \u7684 Collaborator\uFF0C\u6709\u5E78\u4F5C\u4E3A Collaborators \u4E4B\u4E00\uFF0C\u6211\u5F00\u53D1\u4E86 ",paraId:0},{value:"FloatButton",paraId:1},{value:" \u7EC4\u4EF6\u548C ",paraId:0},{value:"QRCode",paraId:2},{value:" \u7EC4\u4EF6\uFF0C\u4EE5\u53CA\u4E00\u4E9B\u5176\u5B83\u7EF4\u62A4\u5DE5\u4F5C\uFF0C\u4E0B\u9762\u5206\u4EAB\u4E00\u4E0B antd \u6D4B\u8BD5\u5E93\u8FC1\u79FB\u7684\u90A3\u4E9B\u4E8B\u513F\uFF5E",paraId:0},{value:"\u5728 ",paraId:3,tocIndex:0},{value:"antd@4.x",paraId:3,tocIndex:0},{value:" \u4E2D\uFF0C\u4F7F\u7528 ",paraId:3,tocIndex:0},{value:"enzyme",paraId:3,tocIndex:0},{value:" \u4F5C\u4E3A\u6D4B\u8BD5\u6846\u67B6\uFF0C\u7136\u800C\u7531\u4E8E enzyme \u7F3A\u4E4F\u7EF4\u62A4\uFF0C\u5230\u4E86 React 18 \u65F6\u4EE3\u5DF2\u7ECF\u5F88\u96BE\u2F40\u6301\u3002\u4E5F\u56E0\u6B64\u4E0D\u5F97\u4E0D\u5F00\u59CB\u4E3A antd \u5F00\u542F\u6F2B\u2ED3\u7684 ",paraId:3,tocIndex:0},{value:"@testing-lib",paraId:3,tocIndex:0},{value:" \u8FC1\u79FB\u4E4B\u8DEF\u3002",paraId:3,tocIndex:0},{value:"\u5728\u8FC1\u79FB\u8FC7\u7A0B\u4E2D\uFF0C\u6211\u627F\u62C5\u4E86\u5927\u6982 antd \u56DB\u5206\u4E4B\u4E00\u7684\u5DE5\u4F5C\u91CF\uFF0C\u8FD9\u91CC\u4E3B\u8981\u8BB0\u5F55\u4E00\u4E0B\u8FC1\u79FB\u8FC7\u7A0B\u4E2D\u9047\u5230\u7684\u95EE\u9898\u3002",paraId:4,tocIndex:0},{value:"\u611F\u8C22\u5728\u6B64\u671F\u95F4 ",paraId:5,tocIndex:0},{value:"@zombieJ",paraId:5,tocIndex:0},{value:" ",paraId:5,tocIndex:0},{value:"@MadCcc",paraId:5,tocIndex:0},{value:" ",paraId:5,tocIndex:0},{value:"@miracles1919",paraId:5,tocIndex:0},{value:" \u63D0\u4F9B\u7684\u5E2E\u52A9\u3002",paraId:5,tocIndex:0},{value:"\u5728\u8FC1\u79FB\u4E4B\u524D\uFF0C\u6211\u4EEC\u9700\u8981\u5148\u641E\u6E05\u695A\u8FC1\u79FB\u7684\u76EE\u7684\u662F\u4EC0\u4E48\u3002\u5728 ",paraId:6,tocIndex:1},{value:"enzyme",paraId:6,tocIndex:1},{value:" \u4E2D\uFF0C\u5927\u591A\u6570\u573A\u666F\u662F\u6D4B\u8BD5\u4E86\u7EC4\u4EF6\u4E2D\u7684\u72B6\u6001\u662F\u5426\u6B63\u786E\uFF0C\u6216\u8005 class \u4E0A\u7684\u9759\u6001\u5C5E\u6027\u662F\u5426\u6B63\u5E38\u88AB\u8D4B\u503C\uFF0C\u8FD9\u5176\u5B9E\u662F\u4E0D\u5408\u7406\u7684\uFF0C\u56E0\u4E3A\u6211\u4EEC\u66F4\u91CD\u8981\u7684\u662F\u9700\u8981\u5173\u5FC3\u201C\u529F\u80FD\u201D\u662F\u5426\u6B63\u5E38\uFF0C\u800C\u975E\u201C\u5C5E\u6027\u201D\u662F\u5426\u6B63\u786E\uFF0C\u56E0\u4E3A\u6E90\u4EE3\u7801\u5BF9\u4F7F\u7528\u8005\u6765\u8BF4\u662F\u9ED1\u76D2\uFF0C\u7528\u6237\u53EA\u5173\u5FC3\u7EC4\u4EF6\u662F\u5426\u6B63\u786E\u3002",paraId:6,tocIndex:1},{value:"\u57FA\u4E0A\uFF0C\u6D4B\u8BD5\u7528\u4F8B\u5E94\u8BE5\u57FA\u4E8E\u201C\u884C\u4E3A\u201D\u6765\u7F16\u5199\uFF0C\u800C\u975E\u201C\u5B9E\u73B0\u201D\u6765\u7F16\u5199\uFF08\u8FD9\u4E5F\u662F ",paraId:7,tocIndex:1},{value:"testing-library",paraId:7,tocIndex:1},{value:" \u7684\u76EE\u6807\uFF09\u3002\u5728\u8FD9\u4E2A\u539F\u5219\u4E0A\uFF0C\u4F1A\u53D1\u73B0\u6709\u51E0\u4E2A\u7528\u4F8B\u662F\u591A\u4F59\u7684\uFF08\u56E0\u4E3A\u5728\u5B9E\u9645\u4EE3\u7801\u4E2D\u4E0D\u4F1A\u5355\u72EC\u89E6\u53D1\u67D0\u4E9B\u51FD\u6570\uFF09\uFF0C\u5C06\u5176\u5220\u9664\u4E5F\u5E76\u6CA1\u6709\u5F71\u54CD\u5230 test coverage\u3002",paraId:7,tocIndex:1},{value:"\u5F53\u7136\u4E86\uFF0C\u8FD9\u53EA\u662F\u653E\u5F03 ",paraId:8,tocIndex:1},{value:"enzyme",paraId:8,tocIndex:1},{value:" \u7684\u5176\u4E2D\u4E00\u4E2A\u539F\u56E0\u3002\u66F4\u91CD\u8981\u7684\u662F\u5B83\u7F3A\u4E4F\u7EF4\u62A4\uFF0C\u5E76\u4E14\u4E0D\u652F\u6301 React 18 \u4E86\u3002",paraId:8,tocIndex:1},{value:"enzyme",paraId:9,tocIndex:3},{value:" \u652F\u6301\u4E09\u79CD\u65B9\u5F0F\u7684\u6E32\u67D3\uFF1A",paraId:9,tocIndex:3},{value:"shallow: \u6D45\u6E32\u67D3\uFF0C\u662F\u5BF9\u5B98\u65B9\u7684 Shallow Renderer \u7684\u5C01\u88C5\u3002\u5C06\u7EC4\u4EF6\u6E32\u67D3\u6210\u865A\u62DF DOM \u5BF9\u8C61\uFF0C\u901A\u8FC7 Shallow Render \u5F97\u5230\u7684\u7EC4\u4EF6\u4E0D\u4F1A\u6709\u65AD\u8A00\u5230\u5B50\u7EC4\u4EF6\u7684\u90E8\u5206\uFF0C\u5E76\u4E14\u53EF\u4EE5\u4F7F\u7528 jQuery \u7684\u65B9\u5F0F\u8BBF\u95EE\u7EC4\u4EF6\u7684\u4FE1\u606F\u3002",paraId:10,tocIndex:3},{value:"render: \u9759\u6001\u6E32\u67D3\uFF0C\u5B83\u5C06 React \u7EC4\u4EF6\u6E32\u67D3\u6210\u9759\u6001\u7684 HTML \u5B57\u7B26\u4E32\uFF0C\u7136\u540E\u89E3\u6790\u8FD9\u6BB5\u5B57\u7B26\u4E32\uFF0C\u5E76\u8FD4\u56DE\u4E00\u4E2A\u5B9E\u4F8B\u5BF9\u8C61\uFF0C\u53EF\u4EE5\u7528\u6765\u5206\u6790\u7EC4\u4EF6\u7684 html \u7ED3\u6784\u3002",paraId:11,tocIndex:3},{value:"mount: \u5B8C\u5168\u6E32\u67D3\uFF0C\u5B83\u5C06\u7EC4\u4EF6\u6E32\u67D3\u52A0\u8F7D\u6210\u4E00\u4E2A\u771F\u5B9E\u7684 DOM \u8282\u70B9\uFF0C\u7528\u6765\u6D4B\u8BD5 DOM API \u7684\u4EA4\u4E92\u548C\u7EC4\u4EF6\u7684\u751F\u547D\u5468\u671F\uFF0C\u7528\u5230\u4E86 jsdom \u6765\u6A21\u62DF\u6D4F\u89C8\u5668\u73AF\u5883\u3002",paraId:12,tocIndex:3},{value:"\u4E3A\u4E86\u8D34\u8FD1\u6D4F\u89C8\u5668\u73B0\u5B9E\u573A\u666F\uFF0C",paraId:13,tocIndex:3},{value:"antd@4.x",paraId:13,tocIndex:3},{value:" \u9009\u7528 ",paraId:13,tocIndex:3},{value:"mount",paraId:13,tocIndex:3},{value:" \u6765\u8FDB\u884C\u6E32\u67D3\uFF0C\u800C\u5728 ",paraId:13,tocIndex:3},{value:"@testing-library",paraId:13,tocIndex:3},{value:" \u4E2D\u5BF9\u5E94\u7684\u5219\u662F ",paraId:13,tocIndex:3},{value:"render",paraId:13,tocIndex:3},{value:" \u65B9\u6CD5\uFF1A",paraId:13,tocIndex:3},{value:"--  import { mount } from 'enzyme';\n++  import { render } from '@testing-library/react';\n\n--  const wrapper = mount(\n++  const { container } = render(\n      <ConfigProvider getPopupContainer={getPopupContainer}>\n        <Slider />\n      </ConfigProvider>,\n    );\n",paraId:14,tocIndex:3},{value:"enzyme",paraId:15,tocIndex:4},{value:" \u63D0\u4F9B\u4E86 ",paraId:15,tocIndex:4},{value:"simulate(event)",paraId:15,tocIndex:4},{value:" \u65B9\u6CD5\u6765\u6A21\u62DF\u4E8B\u4EF6\u89E6\u53D1\u548C\u7528\u6237\u4EA4\u4E92\uFF0C",paraId:15,tocIndex:4},{value:"event",paraId:15,tocIndex:4},{value:" \u4E3A\u4E8B\u4EF6\u540D\u79F0\uFF0C\u800C\u5728 ",paraId:15,tocIndex:4},{value:"@testing-library",paraId:15,tocIndex:4},{value:" \u4E2D\u5BF9\u5E94\u7684\u5219\u662F ",paraId:15,tocIndex:4},{value:"fireEvent",paraId:15,tocIndex:4},{value:" \u65B9\u6CD5\uFF1A",paraId:15,tocIndex:4},{value:"++  import { fireEvent } from '@testing-library/react';\n\n--  wrapper.find('.ant-handle').simulate('click');\n++  fireEvent.click(container.querySelector('.ant-handle'));\n",paraId:16,tocIndex:4},{value:"\u5728 ",paraId:17,tocIndex:5},{value:"enzyme",paraId:17,tocIndex:5},{value:" \u4E2D\uFF0C\u63D0\u4F9B\u4E86\u4E00\u4E9B\u5185\u7F6E\u7684 api \u6765\u64CD\u4F5C dom\uFF0C\u6216\u8005\u67E5\u627E\u7EC4\u4EF6\uFF1A",paraId:17,tocIndex:5},{value:"instance(): \u8FD4\u56DE\u6D4B\u8BD5\u7EC4\u4EF6\u7684\u5B9E\u4F8B",paraId:18,tocIndex:5},{value:"at(index): \u8FD4\u56DE\u4E00\u4E2A\u6E32\u67D3\u8FC7\u7684\u5BF9\u8C61",paraId:18,tocIndex:5},{value:"text(): \u8FD4\u56DE\u5F53\u524D\u7EC4\u4EF6\u7684\u6587\u672C\u5185\u5BB9",paraId:18,tocIndex:5},{value:"html(): \u8FD4\u56DE\u5F53\u524D\u7EC4\u4EF6\u7684 HTML \u4EE3\u7801\u5F62\u5F0F",paraId:18,tocIndex:5},{value:"props(): \u8FD4\u56DE\u7EC4\u4EF6\u7684\u6240\u6709\u5C5E\u6027",paraId:18,tocIndex:5},{value:"prop(key): \u8FD4\u56DE\u7EC4\u4EF6\u7684\u6307\u5B9A\u5C5E\u6027",paraId:18,tocIndex:5},{value:"state(): \u8FD4\u56DE\u7EC4\u4EF6\u7684\u72B6\u6001",paraId:18,tocIndex:5},{value:"setState(nextState): \u8BBE\u7F6E\u7EC4\u4EF6\u7684\u72B6\u6001",paraId:18,tocIndex:5},{value:"setProps(nextProps): \u8BBE\u7F6E\u7EC4\u4EF6\u7684\u5C5E\u6027",paraId:18,tocIndex:5},{value:"find(selector): \u6839\u636E\u9009\u62E9\u5668\u67E5\u627E\u8282\u70B9\uFF0Cselector \u53EF\u4EE5\u662F CSS \u4E2D\u7684\u9009\u62E9\u5668\uFF0C\u4E5F\u53EF\u4EE5\u662F\u7EC4\u4EF6\u7684\u6784\u9020\u51FD\u6570\uFF0C\u4EE5\u53CA\u7EC4\u4EF6\u7684 displayName \u7B49",paraId:18,tocIndex:5},{value:"\u5728 ",paraId:19,tocIndex:5},{value:"testing-library",paraId:19,tocIndex:5},{value:" \u4E2D\uFF0C\u6CA1\u6709\u63D0\u4F9B\u8FD9\u4E9B api\uFF08\u6B63\u5982\u4E0A\u9762\u63D0\u5230\u8FC7\u7684 - ",paraId:19,tocIndex:5},{value:"testing-library",paraId:19,tocIndex:5},{value:" \u66F4\u52A0\u6CE8\u91CD\u884C\u4E3A\u4E0A\u7684\u6D4B\u8BD5\uFF09\uFF0C\u6240\u4EE5\u9700\u8981\u6362\u6210\u539F\u751F\u7684 dom \u64CD\u4F5C\uFF1A",paraId:19,tocIndex:5},{value:"    expect(ref.current.getPopupDomNode()).toBe(null);\n--  popover.find('span').simulate('click');\n--  expect(popover.find('Trigger PopupInner').props().visible).toBeTruthy();\n\n++  expect(container.querySelector('.ant-popover-inner-content')).toBeFalsy();\n++  fireEvent.click(popover.container.querySelector('span'));\n++  expect(container.querySelector('.ant-popover-inner-content')).toBeTruthy();\n",paraId:20,tocIndex:5},{value:"\u5728\u5927\u7248\u672C\u5347\u7EA7\u7684\u540C\u65F6\uFF0C\u5E9F\u5F03\u4E86\u90E8\u5206\u7EC4\u4EF6\uFF0C\u4F46\u662F\u5E76\u6CA1\u6709\u5728 antd \u4E2D\u79FB\u9664\uFF0C\u6BD4\u5982 BackTop \u7EC4\u4EF6\uFF0C\u9700\u8981\u5728\u7EC4\u4EF6\u4E2D\u52A0\u5165 warning \u4EE5\u4FDD\u8BC1\u517C\u5BB9\u6027\uFF0C\u6240\u4EE5\u8FD8\u9700\u8981\u5BF9 warning \u7F16\u5199\u4E13\u95E8\u7684\u5355\u5143\u6D4B\u8BD5:",paraId:21,tocIndex:6},{value:"    describe('BackTop', () => {\n++    it('should console Error', () => {\n++        const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});\n++        render(<BackTop />);\n++        expect(errSpy).toHaveBeenCalledWith(\n++          'Warning: [antd: BackTop] `BackTop` is deprecated. Please use `FloatButton.BackTop` instead.',\n++        );\n++      errSpy.mockRestore();\n++    });\n    });\n",paraId:22,tocIndex:6},{value:"\u5728\u8F6C\u6362\u8FC7\u7A0B\u4E2D\uFF0C\u53D1\u73B0\u4E86\u2F00\u4E2A\u795E\u5947\u7684\u73B0\u8C61\uFF0C\u6709\u4E9B\u60C5\u51B5\u4E0B\uFF0C\u540C\u6837\u7684 case \u751F\u6210\u7684 DOM \u5FEB\u7167\u4F1A\u4E0D\u4E00\u6837\uFF0C\u4E5F\u56E0\u6B64\u5F00\u59CB\u63A2\u7D22 React 18 \u5230\u5E95\u53D8\u5316\u4E86\u4EC0\u4E48\uFF1A",paraId:23,tocIndex:7},{value:"\u8FC7\u53BB ",paraId:24,tocIndex:7},{value:"enzyme",paraId:24,tocIndex:7},{value:" \u7684 ",paraId:24,tocIndex:7},{value:"snapshot",paraId:24,tocIndex:7},{value:" \u5BF9\u2F50\u662F\u901A\u8FC7 ",paraId:24,tocIndex:7},{value:"enzyme-to-json",paraId:24,tocIndex:7},{value:" \u63D2\u4EF6\u5C06 ",paraId:24,tocIndex:7},{value:"enzyme object",paraId:24,tocIndex:7},{value:" \u8F6C\u6362\u6210\u5E8F\u5217\u5316\u5BF9\u8C61\uFF1A",paraId:24,tocIndex:7},{value:"// jest.config.js\nmodule.exports = {\n  // ...\n  snapshotSerializers: ['enzyme-to-json/serializer'],\n};\n",paraId:25,tocIndex:7},{value:"\u5230\u4E86 ",paraId:26,tocIndex:7},{value:"@testing-library/react",paraId:26,tocIndex:7},{value:" \u5219\u76F4\u63A5\u901A\u8FC7\u8C03\u7528 ",paraId:26,tocIndex:7},{value:"render",paraId:26,tocIndex:7},{value:" \u4EA7\u2F63 dom \u5143\u7D20\uFF0C\u7136\u540E\u5BF9 dom \u8FDB\u2F8F\u5BF9\u2F50\uFF1A",paraId:26,tocIndex:7},{value:"--  import { mount } from 'enzyme';\n++  import { render } from '@testing-library/react';\n\n    describe('xxx', () => {\n      it('yyy', () => {\n--      const wrapper = mount(<Demo />);\n++      const { container } = render(<Demo />);\n--      expect(wrapper.render()).toMatchSnapshot();\n++      expect(container.firstChild).toMatchSnapshot();\n      });\n    });\n\n",paraId:27,tocIndex:7},{value:"\u6709\u8DA3\u7684\u662F\uFF0C\u5728\u2F00\u4E9B\u6D4B\u8BD5\u2F64\u4F8B\u4E2D\u3002\u5B83\u4F1A\u6302\u6389\uFF0C\u533A\u522B\u5728\u4E8E React 18 \u6709\u65F6\u5019\u4F1A\u5C11\u2F00\u4E9B\u7A7A\u2F8F\uFF1A",paraId:28,tocIndex:7},{value:"    <div>\n--\n      Hello World\n    </div>\n",paraId:29,tocIndex:7},{value:"\u901A\u8FC7\u6D4B\u8BD5 dom \u7684 ",paraId:30,tocIndex:7},{value:"innerHTML",paraId:30,tocIndex:7},{value:" \u540E\u53D1\u73B0\uFF0C17 \u548C 18 \u662F\u2F00\u6837\u7684\u3002\u6240\u4EE5\u5728\u9047\u5230\u95EE\u9898\u4E4B\u521D\uFF0C\u6211\u4EEC\u53EA\u662F\u5C06\u6D4B\u8BD5\u7528\u4F8B\u7B80\u5355\u7684\u6539\u6210\u2F50\u8F83 ",paraId:30,tocIndex:7},{value:"innerHTML",paraId:30,tocIndex:7},{value:" :",paraId:30,tocIndex:7},{value:"expect(container.querySelector('.className').innerHTML).toMatchSnapshot();\n",paraId:31,tocIndex:7},{value:"\u4F46\u662F\uFF0C\u968F\u7740\u8FC1\u79FB\u53D8\u591A\uFF0C\u4F1A\u9010\u6E10\u53D1\u73B0\u8FD9\u79CD\u60C5\u51B5\u4E0D\u65AD\u53D1\u2F63\u3002\u6BD4\u8F83 ",paraId:32,tocIndex:7},{value:"innerHTML",paraId:32,tocIndex:7},{value:" \u4E5F\u4E0D\u662F\u957F\u4E45\u4E4B\u8BA1\u3002\u4E8E\u662F\u5F00\u59CB\u63A2\u7D22\u4E3A\u4EC0\u4E48\u4F1A\u51FA\u73B0\u8FD9\u79CD\u60C5\u51B5\u3002",paraId:32,tocIndex:7},{value:"pretty-format",paraId:33,tocIndex:8},{value:" \u662F\u2F00\u4E2A\u5F88\u6709\u610F\u601D\u7684\u5E93\uFF0C\u5B83\u53EF\u4EE5\u5C06\u4EFB\u610F\u5BF9\u8C61\u8F6C\u6362\u6210\u5B57\u7B26\u4E32\u3002\u5B83\u7684\u2F00\u4E2A\u2F64\u9014\u5C31\u662F\u2F64\u4E8E jest \u7684 snapshot \u5BF9\u2F50\u3002\u5B83\u7684\u2F00\u4E2A\u7279\u70B9\u662F\u53EF\u4EE5\u2F83\u5B9A\u4E49\u8F6C\u6362\u89C4\u5219\u3002",paraId:33,tocIndex:8},{value:"jest",paraId:34,tocIndex:8},{value:" \u4E2D\u5BF9\u2F50 ",paraId:34,tocIndex:8},{value:"snapshot",paraId:34,tocIndex:8},{value:" \u4F1A\u5148\u505A\u2F00\u6B65 ",paraId:34,tocIndex:8},{value:"format",paraId:34,tocIndex:8},{value:"\uFF0C\u5BF9\u4E8E\u539F\u2F63 ",paraId:34,tocIndex:8},{value:"dom",paraId:34,tocIndex:8},{value:"\u3001",paraId:34,tocIndex:8},{value:"object",paraId:34,tocIndex:8},{value:" \u7B49\u5E38\u2EC5\u5BF9\u8C61\u3002\u5B83\u5DF2\u7ECF\u5185\u7F6E\u4E86\u2F00\u5957 ",paraId:34,tocIndex:8},{value:"plugins",paraId:34,tocIndex:8},{value:" \u2F64\u4EE5\u505A\u683C\u5F0F\u5316\u8F6C\u6362\uFF1A",paraId:34,tocIndex:8},{value:"<div>\n  <span>Hello</span>\n  <p>World</p>\n</div>\n\u2193\n<div>\n  <span> Hello </span>\n  <p>World</p>\n</div>\n",paraId:35,tocIndex:8},{value:"\u51FA\u73B0\u591A\u4F59\u7A7A\u683C\u7B2C\u2F00\u53CD\u5E94\u5C31\u662F\u662F\u5426\u662F\u56E0\u4E3A 17 & 18 \u5F15\u2F0A\u7684 ",paraId:36,tocIndex:8},{value:"@testing-lib/react",paraId:36,tocIndex:8},{value:" \u7248\u672C\u4E0D\u540C\uFF0C\u5BFC\u81F4\u5F71\u54CD\u4E86 ",paraId:36,tocIndex:8},{value:"jest",paraId:36,tocIndex:8},{value:" \u4F9D\u8D56\u7684 ",paraId:36,tocIndex:8},{value:"pretty-format",paraId:36,tocIndex:8},{value:" \u7248\u672C\uFF0C\u7ECF\u8FC7\u68C0\u67E5\u90FD\u662F\u2F00\u81F4\u7684\uFF1A",paraId:36,tocIndex:8},{value:'{\n  "devDependencies": {\n    "pretty-format": "^29.0.0",\n    "@testing-library/react": "^13.0.0"\n  }\n}\n',paraId:37,tocIndex:8},{value:"\u8FD9\u4E2A\u5224\u65AD\u4E0D\u5BF9\u540E\uFF0C\u90A3\u5C31\u662F\u53E6\u2F00\u79CD\u60C5\u51B5\u3002dom \u4E2D\u5B58\u5728",paraId:38,tocIndex:8},{value:"\u7A7A\u5143\u7D20",paraId:38,tocIndex:8},{value:"\uFF0C\u4F7F\u5F97 ",paraId:38,tocIndex:8},{value:"pretty-format",paraId:38,tocIndex:8},{value:" \u53EF\u4EE5\u611F\u77E5\uFF0C\u4F46\u662F\u672C\u8EAB\u5374\u4E0D\u5F71\u54CD ",paraId:38,tocIndex:8},{value:"innerHTML",paraId:38,tocIndex:8},{value:" \uFF0C\u4E8E\u662F\u5C31\u5199\u4E86\u2F00\u4E2A\u7B80\u5355\u7684 test case\uFF1A",paraId:38,tocIndex:8},{value:"const holder = document.createElement('div');\nholder.append('');\nholder.append(document.createElement('a'));\nexpect(holder).toMatchSnapshot();\nconsole.log(holder.innerHTML);\n",paraId:39,tocIndex:8},{value:"\u5F97\u5230\u4EE5\u4E0B\u8F93\u51FA\uFF1A",paraId:40,tocIndex:8},{value:"// snapshot\nexports[`debug exports modules correctly 1`] = `\n<div>\n\n  <a />\n</div>\n`;\n\n// console.log\n<a></a>\n",paraId:41,tocIndex:8},{value:"\u548C\u8BBE\u60F3\u7684\u2F00\u81F4\uFF0C\u90A3\u4E48\u5C31\u5F88\u7B80\u5355\u4E86\u3002\u90A3\u4E48\u2F24\u6982\u7387\u5C31\u662F ",paraId:42,tocIndex:8},{value:"React 18",paraId:42,tocIndex:8},{value:" \u7684 ",paraId:42,tocIndex:8},{value:"render",paraId:42,tocIndex:8},{value:" \u4F1A\u5FFD\u7565\u7A7A\u5143\u7D20\u3002\u6211\u4EEC\u505A\u2F00\u4E2A\u7B80\u5355\u7684\u5B9E\u9A8C\uFF1A",paraId:42,tocIndex:8},{value:"import React, { useEffect, useRef, version } from 'react';\n\nconst App: React.FC = () => {\n  const holderRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    console.log(holderRef.current?.childNodes);\n  }, []);\n  return (\n    <div ref={holderRef}>\n      <p>{version}</p>\n    </div>\n  );\n};\n\nexport default App;\n",paraId:43,tocIndex:8},{value:"\u679C\u4E0D\u5176\u7136\uFF1A",paraId:44,tocIndex:8},{value:"React 17",paraId:45,tocIndex:8},{value:"React 18",paraId:45,tocIndex:8},{value:"NodeList(2) [text, p]",paraId:45,tocIndex:8},{value:"NodeList [p]",paraId:45,tocIndex:8},{value:"\u68C0\u67E5\u2F00\u4E0B ",paraId:46,tocIndex:8},{value:"Fiber",paraId:46,tocIndex:8},{value:" \u8282\u70B9\u4FE1\u606F\uFF0C\u53EF\u4EE5\u53D1\u73B0 ",paraId:46,tocIndex:8},{value:"React 17",paraId:46,tocIndex:8},{value:" \u4F1A\u628A\u7A7A\u5143\u7D20\u4E5F\u4F5C\u4E3A ",paraId:46,tocIndex:8},{value:"Fiber",paraId:46,tocIndex:8},{value:" \u8282\u70B9\uFF0C\u800C ",paraId:46,tocIndex:8},{value:"React 18",paraId:46,tocIndex:8},{value:" \u5219\u4F1A\u5FFD\u7565\u7A7A\u5143\u7D20\uFF1A",paraId:46,tocIndex:8},{value:"React 17:",paraId:47,tocIndex:8},{value:"React 18:",paraId:48,tocIndex:8},{value:"\u6309\u56FE\u7D22\u9AA5\u5C31\u80FD\u627E\u5230\u76F8\u5173 PR\uFF1A",paraId:49,tocIndex:8},{value:"https://github.com/facebook/react/pull/22807",paraId:50,tocIndex:8},{value:"antd \u9700\u8981\u5BF9 React16\u300117\u300118 \u90FD\u8FDB\u2F8F\u6D4B\u8BD5\uFF0C\u5982\u679C snapshot \u4E0D\u53EF\u2F8F\u4F1A\u9020\u6210\u592A\u2F24\u6210\u672C\u3002\u6240\u4EE5\u6211\u4EEC\u9700\u8981\u5BF9 jest \u8FDB\u2F8F\u6539\u9020\u3002",paraId:51,tocIndex:9},{value:"enzyme-to-json",paraId:51,tocIndex:9},{value:" \u5219\u7ED9\u4E86\u6211\u7075\u611F\uFF0C\u6211\u4EEC\u53EF\u4EE5\u4FEE\u6539 snapshot \u2F63\u6210\u903B\u8F91\u6765\u62B9\u5E73 React \u4E0D\u540C\u7248\u672C\u4E4B\u95F4\u7684 diff\uFF1A",paraId:51,tocIndex:9},{value:"expect.addSnapshotSerializer({\n  // \u5224\u65AD\u2F00\u4E0B\u662F\u5426\u662F dom \u5143\u7D20\uFF0C\u5982\u679C\u662F\u7684\u5C31\u2F9B\u6211\u4EEC\u2F83\u2F30\u7684\u5E8F\u5217\u5316\u903B\u8F91\n  // \u4EE3\u7801\u7B80\u5316\u8FC7\uFF0C\u771F\u5B9E\u5224\u65AD\u9700\u8981\u66F4\u591A\u903B\u8F91\uFF0C\u53EF\u4EE5\u53C2\u8003 antd \u7684 setupAfterEnv.ts\n  test: (element) => element instanceof HTMLElement,\n  // ...\n});\n",paraId:52,tocIndex:9},{value:"\u7136\u540E\u63A5\u2F0A ",paraId:53,tocIndex:9},{value:"pretty-format",paraId:53,tocIndex:9},{value:"\uFF0C\u6DFB\u52A0\u2F83\u2F30\u7684\u903B\u8F91\uFF1A",paraId:53,tocIndex:9},{value:"const htmlContent = format(element, {\n  plugins: [plugins.DOMCollection, plugins.DOMElement],\n});\n\nexpect.addSnapshotSerializer({\n  test: '//...',\n  print: (element) => {\n    const filtered = htmlContent\n      .split(/[\\n\\r]+/)\n      .filter((line) => line.trim())\n      .map((line) => line.replace(/\\s+$/, ''))\n      .join('\\n');\n    return filtered;\n  },\n});\n",paraId:54,tocIndex:9},{value:"\u4EE5\u4E0A\uFF0C\u662F antd \u6D4B\u8BD5\u6846\u67B6\u8FC1\u79FB\u65F6\u9047\u5230\u7684\u4E00\u4E9B\u95EE\u9898\uFF0C\u5E0C\u671B\u5BF9\u4E8E\u9700\u8981\u8FC1\u79FB\u6216\u8005\u5C1A\u672A\u5F00\u59CB\u7F16\u5199\u6D4B\u8BD5\u7528\u4F8B\u7684\u540C\u5B66\u63D0\u4F9B\u5E2E\u52A9\u3002\u4E5F\u6B22\u8FCE\u5927\u5BB6\u52A0\u5165 antd \u793E\u533A\uFF0C\u5171\u540C\u4E3A\u5F00\u6E90\u5949\u732E\u81EA\u5DF1\u7684\u529B\u91CF\u3002",paraId:55,tocIndex:10}];}}]);