我正在使用“react-horizontal-scrolling-menu”为表格创建水平滚动。现在代码工作正常，但是当我尝试为包含的组件编写测试用例时
import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
我收到错误
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
node_modules/react-horizontal-scrolling-menu/dist/index.mjs:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import e from"react";const t="react-horizontal-scrolling-menu",n="-separator",r=`${t}-${n}`,o=`${t}--item`,i=`${t}--scroll-container`,l=`${t}--wrapper`,s=`${t}--inner-wrapper`,a=`${t}--header`,u=`${t}--arrow-left`,c=`${t}--arrow-right`,d=`${t}--footer`,v="itemId",f="data-key",m="data-index";var h=Object.freeze({__proto__:null,rootClassName:t,separatorString:n,separatorClassName:r,itemClassName:o,scrollContainerClassName:i,wrapperClassName:l,innerWrapperClassName:s,headerClassName:a,arrowLeftClassName:u,arrowRightClassName:c,footerClassName:d,id:v,dataKeyAttribute:f,dataIndexAttribute:m});function g({className:t="",children:n,onScroll:r=(()=>{}),scrollRef:o}){const l=e.useMemo((()=>`${i} ${t}`),[t]);return e.createElement("div",{className:l,onScroll:r,ref:o},n)}var p=e.memo((function({className:t,id:n,index:r,refs:o}){const i=e.useRef(null);return o[r]=i,e.createElement("div",Object.assign({className:t},{[f]:n,[m]:r},{ref:i}))}));var b=e.memo((function({children:t,className:n,id:r,index:o,refs:i}){const l=e.useRef(null);return i[String(o)]=l,e.createElement("div",Object.assign({className:n},{[f]:r,[m]:o},{ref:l}),t)}));function y(e){return"object"==typeof e&&null!=e&&1===e.nodeType}function E(e,t){return(!t||"hidden"!==e)&&"visible"!==e&&"clip"!==e}function w(e,t){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var n=getComputedStyle(e,null);return E(n.overflowY,t)||E(n.overflowX,t)||function(e){var t=function(e){if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}}(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)}(e)}return!1}function I(e,t,n,r,o,i,l,s){return i<e&&l>t||i>e&&l<t?0:i<=e&&s<=n||l>=t&&s>=n?i-e-r:l>t&&s<n||i<e&&s>n?l-t+o:0}var N,C=function(e,t){var n=window,r=t.scrollMode,o=t.block,i=t.inline,l=t.boundary,s=t.skipOverflowHiddenElements,a="function"==typeof l?l:function(e){return e!==l};if(!y(e))throw new TypeError("Invalid target");for(var u,c,d=document.scrollingElement||document.documentElement,v=[],f=e;y(f)&&a(f);){if((f=null==(c=(u=f).parentElement)?u.getRootNode().host||null:c)===d){v.push(f);break}null!=f&&f===document.body&&w(f)&&!w(document.documentElement)||null!=f&&w(f,s)&&v.push(f)}for(var m=n.visualViewport?n.visualViewport.width:innerWidth,h=n.visualViewport?n.visualViewport.height:innerHeight,g=window.scrollX||pageXOffset,p=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),E=b.height,N=b.width,C=b.top,S=b.right,x=b.bottom,M=b.left,$="start"===o||"nearest"===o?C:"end"===o?x:C+E/2,W="center"===i?M+N/2:"end"===i?S:M,k=[],T=0;T<v.length;T++){var O=v[T],V=O.getBoundingClientRect(),R=V.height,A=V.width,j=V.top,H=V.right,B=V.bottom,L=V.left;if("if-needed"===r&&C>=0&&M>=0&&x<=h&&S<=m&&C>=j&&x<=B&&M>=L&&S<=H)return k;var P=getComputedStyle(O),D=parseInt(P.borderLeftWidth,10),F=parseInt(P.borderTopWidth,10),X=parseInt(P.borderRightWidth,10),Y=parseInt(P.borderBottomWidth,10),_=0,q=0,J="offsetWidth"in O?O.offsetWidth-O.clientWidth-D-X:0,U="offsetHeight"in O?O.offsetHeight-O.clientHeight-F-Y:0,z="offsetWidth"in O?0===O.offsetWidth?0:A/O.offsetWidth:0,K="offsetHeight"in O?0===O.offsetHeight?0:R/O.offsetHeight:0;if(d===O)_="start"===o?$:"end"===o?$-h:"nearest"===o?I(p,p+h,h,F,Y,p+$,p+$+E,E):$-h/2,q="start"===i?W:"center"===i?W-m/2:"end"===i?W-m:I(g,g+m,m,D,X,g+W,g+W+N,N),_=Math.max(0,_+p),q=Math.max(0,q+g);else{_="start"===o?$-j-F:"end"===o?$-B+Y+U:"nearest"===o?I(j,B,R,F,Y+U,$,$+E,E):$-(j+R/2)+U/2,q="start"===i?W-L-D:"center"===i?W-(L+A/2)+J/2:"end"===i?W-H+X+J:I(L,H,A,D,X+J,W,W+N,N);var G=O.scrollLeft,Q=O.scrollTop;$+=Q-(_=Math.max(0,Math.min(Q+_/K,O.scrollHeight-R/K+U))),W+=G-(q=Math.max(0,Math.min(G+q/z,O.scrollWidth-A/z+J)))}k.push({el:O,top:_,left:q})}return k};function S(e){return e===Object(e)&&0!==Object.keys(e).length}function x(e,t){var n=e.isConnected||e.ownerDocument.documentElement.contains(e);if(S(t)&&"function"==typeof t.behavior)return t.behavior(n?C(e,t):[]);if(n){var r=function(e){return!1===e?{block:"end",inline:"nearest"}:S(e)?e:{block:"start",inline:"nearest"}}(t);return function(e,t){void 0===t&&(t="auto");var n="scrollBehavior"in document.body.style;e.forEach((function(e){var r=e.el,o=e.top,i=e.left;r.scroll&&n?r.scroll({top:o,left:i,behavior:t}):(r.scrollTop=o,r.scrollLeft=i)}))}(C(e,r),r.behavior)}}var M=function(){return N||(N="performance"in window?performance.now.bind(performance):Date.now),N()};function $(e){var t=M(),n=Math.min((t-e.startTime)/e.duration,1),r=e.ease(n),o=e.startX+(e.x-e.startX)*r,i=e.startY+(e.y-e.startY)*r;e.method(o,i),o!==e.x||i!==e.y?requestAnimationFrame((function(){return $(e)})):e.cb()}function W(e,t,n,r,o,i){var l,s,a,u;void 0===r&&(r=600),void 0===o&&(o=function(e){return 1+--e*e*e*e*e}),l=e,s=e.scrollLeft,a=e.scrollTop,u=function(t,n){e.scrollLeft=Math.ceil(t),e.scrollTop=Math.ceil(n)},$({scrollable:l,method:u,startTime:M(),startX:s,startY:a,x:t,y:n,duration:r,ease:o,cb:i})}var k=function(e){return e&&!e.behavior||"smooth"===e.behavior};var T=function(e,t){var n=t||{};return k(n)?x(e,{block:n.block,inline:n.inline,scrollMode:n.scrollMode,boundary:n.boundary,behavior:function(e){return Promise.all(e.reduce((function(e,t){var r=t.el,o=t.left,i=t.top,l=r.scrollLeft,s=r.scrollTop;return l===o&&s===i?e:[].concat(e,[new Promise((function(e){return W(r,o,i,n.duration,n.ease,(function(){return e({el:r,left:[l,o],top:[s,i]})}))}))])}),[]))}}):Promise.resolve(x(e,t))};const O=e=>Object.values(e).map((e=>e.current)).filter(Boolean);function V(e,t,n,r,o,i){var l;const s=(null===(l=null==e?void 0:e.entry)||void 0===l?void 0:l.target)||e,a=t||"smooth";if(s)return i?null==s?void 0:s.scrollIntoView({behavior:a,inline:n||"end",block:r||"nearest"}):T(s,Object.assign({behavior:a,inline:n||"end",block:r||"nearest",duration:500},o))}const R=e=>document.querySelector(`[${f}='${e}']`),A=e=>document.querySelector(`[${m}='${e}']`);function j(t){return e.isValidElement(t)&&t||"function"==typeof t&&e.createElement(t,null)||null}const H=e=>e.filter((e=>!new RegExp(`.*${n}$`).test(e))),B=e=>{var t;return String((null===(t=null==e?void 0:e.props)||void 0===t?void 0:t[v])||String((null==e?void 0:e.key)||"").replace(/^\.\$/,""))};function L({children:t,itemClassName:i="",refs:l,separatorClassName:s=""}){const a=e.Children.toArray(t).filter(Boolean),u=a.length,c=e.useMemo((()=>`${o} ${i}`),[i]),d=e.useMemo((()=>`${r} ${s}`),[s]);return e.createElement(e.Fragment,null,a.map(((t,r)=>{const o=B(t),i=o+n,s=r+1===u;return[e.createElement(b,{className:c,id:o,key:"menuItem__"+o,refs:l,index:r},t),!s&&e.createElement(p,{className:d,id:i,refs:l,key:i,index:r+.1})]})))}const P="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function D({items:t,itemsChanged:n,refs:r,options:o}){const i=e.useRef(),[l,s]=e.useState([]),a=e.useRef(+setTimeout((()=>{}),0)),u=e.useCallback((e=>{t.set(function(e,t){return[...e].map((e=>{var n,r,o,i;const l=e.target,s=String(null!==(r=null===(n=null==l?void 0:l.dataset)||void 0===n?void 0:n.key)&&void 0!==r?r:"");return[s,{index:String(null!==(i=null===(o=null==l?void 0:l.dataset)||void 0===o?void 0:o.index)&&void 0!==i?i:""),key:s,entry:e,visible:e.intersectionRatio>=t.ratio}]}))}(e,o)),clearTimeout(a.current),a.current=+setTimeout((()=>requestAnimationFrame((()=>{s((e=>{const n=t.getVisible().map((e=>e[1].key));return JSON.stringify(e)!==JSON.stringify(n)?n:e}))}))),o.throttle)}),[t,o]);return P((()=>{const e=O(r),t=i.current||new IntersectionObserver(u,o);return i.current=t,e.forEach((e=>t.observe(e))),()=>{clearTimeout(a.current),t.disconnect(),i.current=void 0}}),[u,n,o,r]),{visibleElementsWithSeparators:l}}const F=t=>e.Children.toArray(t).map(B).filter(Boolean);class X extends Map{toArr(){return this.sort([...this])}toItems(){return this.toArr().map((([e])=>e))}toItemsWithoutSeparators(){return H(this.toItems())}toItemsKeys(){return this.toItems()}sort(e){return e.sort((([,e],[,t])=>+e.index-+t.index))}set(e,t){return Array.isArray(e)?this.sort(e).forEach((([e,t])=>{super.set(String(e),t)})):super.set(String(e),t),this}first(){var e;return null===(e=this.toArr()[0])||void 0===e?void 0:e[1]}last(){var e,t;return null===(t=null===(e=this.toArr().slice(-1))||void 0===e?void 0:e[0])||void 0===t?void 0:t[1]}filter(e){return this.toArr().filter(e)}find(e){return this.toArr().find(e)}findIndex(e){return this.toArr().findIndex(e)}getCurrentPos(e,t){const r=this.toArr().filter((e=>{var r;return t?!(null===(r=null==e?void 0:e[0])||void 0===r?void 0:r.includes(n)):e})),o=r.findIndex((([t,n])=>t===e||n===e));return[r,o]}prev(e,t){var n;const[r,o]=this.getCurrentPos(e,!!t);return-1!==o?null===(n=r[o-1])||void 0===n?void 0:n[1]:void 0}next(e,t){var n;const[r,o]=this.getCurrentPos(e,!!t);return-1!==o?null===(n=r[o+1])||void 0===n?void 0:n[1]:void 0}getVisible(){return this.filter((e=>e[1].visible))}getVisibleElements(){return this.filter((e=>!e[0].includes(n)&&e[1].visible))}}const Y={ratio:.9,rootMargin:"5px",threshold:[.05,.5,.75,.95],throttle:100};const _=e.createContext({}),q=e=>e.reduce(((e,t)=>e.concat(t).concat(`${t}${n}`)),[]).slice(0,-1);function J(e,t){const n=H(e),r=H(t);return{prev:()=>q(function(e,t){const n=e.findIndex((e=>e===(null==t?void 0:t[0]))),r=t.length,o=n-r,i=o<0,l=i?0:o,s=e.slice(l,i?r:n);return s.length===r?s:e.slice(n,r)}(n,r)),next:()=>q(function(e,t){const n=e.findIndex((e=>{var n;return e===(null===(n=t.slice(-1))||void 0===n?void 0:n[0])})),r=t.length,o=n+r+1,i=o>e.length-1,l=i?e.length-1:o,s=e.slice(i?l-r+1:n+1,l);return s.length===r?s:e.slice(e.length-r,e.length+r)}(n,r))}}const U=e=>{var t;const r=(e=>e.filter(((e,t,r)=>{const o=0===t,i=t===r.length-1,l=new RegExp(n).test(e);return!((o||i)&&l)})))(e),o=r[Math.floor(r.length/2)];return{first:null==r?void 0:r[0],center:o,last:null===(t=r.slice(-1))||void 0===t?void 0:t[0]}};function z({LeftArrow:t,RightArrow:r,children:o,Header:i,Footer:v,transitionDuration:f=500,transitionEase:m,transitionBehavior:h,onInit:p=(()=>{}),onUpdate:b=(()=>{}),onMouseDown:y,onMouseUp:E,onMouseMove:w,onScroll:I=(()=>{}),onTouchMove:N,onTouchStart:C,onTouchEnd:S,onWheel:x=(()=>{}),options:M=Y,scrollContainerClassName:$="",itemClassName:W="",separatorClassName:k="",wrapperClassName:T="",apiRef:O={current:{}},RTL:B,noPolyfill:P}){const q=j(t),J=j(r),U=j(i),z=j(v),K=e.useRef(null),[G]=e.useState({}),Q=e.useMemo((()=>Object.assign(Object.assign(Object.assign({},Y),M),{root:K.current})),[M,K.current]),Z=e.useRef(new X).current,ee=function(t,r){const[o,i]=e.useState(""),l=e.useMemo((()=>F(t)),[t]);return e.useEffect((()=>{const e=l.filter(Boolean).join("");r.toItemsWithoutSeparators().filter((e=>!l.includes(e))).forEach((e=>{var t,o;const i=(null===(t=r.last())||void 0===t?void 0:t.key)===e&&(null===(o=r.prev(e))||void 0===o?void 0:o.key)||"";r.delete(i),r.delete(`${e}${n}`),r.delete(e)})),i(e)}),[l,r]),o}(o,Z),{visibleElementsWithSeparators:te}=D({items:Z,itemsChanged:ee,options:Q,refs:G}),ne=!!te.length,re=e.useMemo((()=>function(e,t=[],n,r,o,i){var l,s;const a=H(t),u=!!(null===(l=e.first())||void 0===l?void 0:l.visible),c=!!(null===(s=e.last())||void 0===s?void 0:s.visible),d=t=>{var n;return null===(n=e.find((e=>e[1].key===String(t))))||void 0===n?void 0:n[1]},v=()=>{var t,n;return e.prev(null===(n=null===(t=e.getVisible())||void 0===t?void 0:t[0])||void 0===n?void 0:n[1])},f=()=>{var t,n,r,o;return e.next(null===(o=null===(r=null===(n=null===(t=e.getVisible())||void 0===t?void 0:t.slice)||void 0===n?void 0:n.call(t,-1))||void 0===r?void 0:r[0])||void 0===o?void 0:o[1])};return{getItemById:d,getItemElementById:R,getItemByIndex:t=>{var n;return null===(n=e.find((e=>String(e[1].index)===String(t))))||void 0===n?void 0:n[1]},getItemElementByIndex:A,getNextItem:f,getNextElement:()=>{var t,n,r,o;return e.next(null===(o=null===(r=null===(n=null===(t=e.getVisibleElements())||void 0===t?void 0:t.slice)||void 0===n?void 0:n.call(t,-1))||void 0===r?void 0:r[0])||void 0===o?void 0:o[1],!0)},getPrevItem:v,getPrevElement:()=>{var t,n;return e.prev(null===(n=null===(t=e.getVisibleElements())||void 0===t?void 0:t[0])||void 0===n?void 0:n[1],!0)},isFirstItemVisible:u,isItemVisible:e=>a.includes(String(e)),isLastItem:t=>e.last()===d(t),isLastItemVisible:c,scrollNext:(e,t,l,{duration:s,ease:a,boundary:u=(null==n?void 0:n.current)}={})=>{const c=null!=e?e:null==r?void 0:r.behavior;return V(f(),c,t||"start",l||"nearest",{boundary:u,duration:null!=s?s:null==r?void 0:r.duration,ease:null!=a?a:null==r?void 0:r.ease},o||i)},scrollPrev:(e,t,l,{duration:s,ease:a,boundary:u=(null==n?void 0:n.current)}={})=>{const c=null!=e?e:null==r?void 0:r.behavior;return V(v(),c,t||"end",l||"nearest",{boundary:u,duration:null!=s?s:null==r?void 0:r.duration,ease:null!=a?a:null==r?void 0:r.ease},o||i)},scrollToItem:(e,t,o,i,l)=>{var s,a;return V(e,null!=t?t:null==r?void 0:r.behavior,o,i,Object.assign(Object.assign({boundary:null==n?void 0:n.current},l),{duration:null!==(s=null==l?void 0:l.duration)&&void 0!==s?s:null==r?void 0:r.duration,ease:null!==(a=null==l?void 0:l.ease)&&void 0!==a?a:null==r?void 0:r.ease}))},visibleElements:a,visibleElementsWithSeparators:t,visibleItems:t,visibleItemsWithoutSeparators:a}}(Z,te,K,{duration:f,ease:m,behavior:h},B,P)),[Z,te,ee,B,P]),oe=e.useCallback((()=>Object.assign(Object.assign({},re),{initComplete:ne,items:Z,visibleElementsWithSeparators:te,scrollContainer:K})),[re,ne,Z,te,K]),[ie,le]=e.useState(oe);!function({cb:t=(()=>{}),condition:n,hash:r}){e.useEffect((()=>{n&&t()}),[r,n])}({cb:()=>b(ie),condition:function({cb:t,condition:n}){const[r,o]=e.useState(!1);return e.useEffect((()=>{n&&!r&&(o(!0),t())}),[n,r]),r}({cb:()=>p(ie),condition:ne}),hash:JSON.stringify(te.concat(String(null==ie?void 0:ie.isFirstItemVisible)).concat(String(null==ie?void 0:ie.isLastItemVisible)))}),e.useEffect((()=>le(oe())),[oe]),O.current=ie;const se=e.useCallback((e=>I(ie,e)),[I,ie]),ae=e.useCallback((e=>x(ie,e)),[x,ie]),ue=e.useMemo((()=>`${l} ${T}`),[T]),ce=e.useMemo((()=>`${$}${B?" rtl":""}`),[B,$]);return e.createElement("div",{className:ue,onWheel:ae,onMouseDown:null==y?void 0:y(ie),onMouseUp:null==E?void 0:E(ie),onMouseMove:null==w?void 0:w(ie),onTouchStart:null==C?void 0:C(ie),onTouchMove:null==N?void 0:N(ie),onTouchEnd:null==S?void 0:S(ie)},e.createElement(_.Provider,{value:ie},e.createElement("div",{className:a},U),e.createElement("div",{className:s},e.createElement("div",{className:u},q),e.createElement(g,{className:ce,onScroll:se,scrollRef:K},e.createElement(L,{refs:G,itemClassName:W,separatorClassName:k},o)),e.createElement("div",{className:c},J)),e.createElement("div",{className:d},z)))}export{z as ScrollMenu,_ as VisibilityContext,h as constants,U as getItemsPos,J as slidingWindow};
^^^^^^
SyntaxError: Cannot use import statement outside a module
如何解决这个问题？
我正在使用 Jest 和 React-testing-library 来编写测试用例。
jest.mock("react-horizontal-scrolling-menu", () => {
const ScrollMenu = ({ children }) => {
return children;
};
const VisibilityContext = () => {
return { "isFirstItemVisible": true, "scrollPrev": false };
};
return {
...jest.requireActual("react-horizontal-scrolling-menu"),
ScrollMenu,
VisibilityContext
};
});