jgam

<p>저도 안되는 부분이 있어 댓글남깁니다. 제 코드는 이렇습니다.</p>
<pre class="language-html"><code>(() => {
    let yOffset = 0;
    let prevScrollHeight = 0; //current scroll yOffset previous scroll sections sum of heights
    let currentScene = 0;// currently activated scene in front of our eye
    let enterNewScene = false; //whne new scene set, starts true

    const sceneInfo = [
        {
            type: 'sticky',
            scrollHeight: 0,
            heightNum: 5,// browser's height times 5 to set scrollHeight
            objs:{
                container: document.querySelector('#scroll-section-0'),
                messageA: document.querySelector('#scroll-section-0 .main-message.a'),
                messageB: document.querySelector('#scroll-section-0 .main-message.b'),
                messageC: document.querySelector('#scroll-section-0 .main-message.c'),
                messageD : document.querySelector('#scroll-section-0 .main-message.d'),
                canvas: document.querySelector('#video-canvas-0'),
                context: document.querySelector('#video-canvas-0').getContext('2d'),
                videoImages: [],
            },
            values: {
                // in
                messageA_opacity: [0,1, {start: 0.1, end:0.2}],
                messageA_translateY_in: [20, 0, {start:0.1, end:0.2}],
                messageB_opacity: [0,1, {start: 0.3, end:0.4}],
                messageB_translateY_in: [20, 0, {start:0.3, end:0.4}],
                messageC_opacity: [0,1, {start: 0.5, end:0.6}],
                messageC_translateY_in: [20, 0, {start:0.5, end:0.6}],
                messageD_opacity: [0,1, {start: 0.7, end:0.8}],
                messageD_translateY_in: [20, 0, {start:0.7, end:0.8}],

                // out
                messageA_opacity_out: [1,0,{start:0.25, end:0.3}],
                messageA_translateY_out: [0, -20, {start:0.25, end:0.3}],
                messageB_opacity_out: [1,0,{start:0.45, end:0.5}],
                messageB_translateY_out: [0, -20, {start:0.45, end:0.5}],
                messageC_opacity_out: [1,0,{start:0.65, end:0.7}],
                messageC_translateY_out: [0, -20, {start:0.65, end:0.7}],
                messageD_opacity_out: [1,0,{start:0.85, end:0.9}],
                messageD_translateY_out: [0, -20, {start:0.85, end:0.9}],

                // images
                videoIMageCount: 300,
                imageSequence: [0, 299],

                //canvas
                canvas_opacity: [1,0,{start:0.9,end:1}]



            }
        },
        {
            type: 'normal',
            scrollHeight: 0,
            heightNum: 5,// browser's height times 5 to set scrollHeight,
            objs:{
                container: document.querySelector('#scroll-section-1')
            }
        },
        {
            type: 'sticky',
            scrollHeight: 0,// for compatibility purposes
            heightNum: 5,// browser's height times 5 to set scrollHeight
            objs:{
                container: document.querySelector('#scroll-section-2'),
                messageA: document.querySelector('#scroll-section-2 .a'),
                messageB: document.querySelector('#scroll-section-2 .b'),
                messageC: document.querySelector('#scroll-section-2 .c'),
                pinB: document.querySelector('#scroll-section-2 .b .pin'),
                pinC: document.querySelector('#scroll-section-2 .c .pin'),
                canvas: document.querySelector('#video-canvas-1'),
                context: document.querySelector('#video-canvas-1').getContext('2d'),
                videoImages: [],
            },
            values:{
                messageA_translateY_in: [20, 0, {start:0.15, end:0.2}],
                messageB_translateY_in: [30, 0, {start:0.5, end:0.55}],
                messageC_translateY_in: [30, 0, {start:0.72, end:0.77}],
                messageA_opacity: [0,1,{start:0.15, end:0.2}],
                messageB_opacity: [0,1,{start:0.5, end:0.55}],
                messageC_opacity: [0,1,{start:0.72, end:0.77}],
                messageA_translateY_out: [0,-20, {start:0.3, end:0.35}],
                messageB_translateY_out: [0,-20, {start:0.58, end:0.63}],
                messageC_translateY_out: [0,-20, {start:0.85, end:0.9}],
                messageA_opacity_out: [1,0,{start:0.3, end:0.35}],
                messageB_opacity_out: [1,0,{start:0.58, end:0.63}],
                messageC_opacity_out: [1,0,{start:0.85, end:0.9}],
                pinB_scaleY:  [0.5,1,{start:0.5, end:0.55}],
                pinC_scaleY:  [0.5,1,{start:0.72, end:0.77}],
                pinB_opacity: [0,1,{start:0.5, end:0.55}],
                pinC_opacity: [0,1,{start:0.72, end:0.77}],
                pinB_opacity_out:[1,0,{start:0.58, end:0.63}],
                pinC_opacity_out:[1,0,{start:0.85, end:0.9}],
                // images
                videoIMageCount: 960,
                imageSequence: [0, 959],

                //canvas
                canvas_opacity: [0,1,{start:0,end:0.1}],
                canvas_opacity_out: [1,0,{start: 0.95, end:1}]
            }
        },
        {
            type: 'sticky',
            scrollHeight: 0,
            heightNum: 5,// browser's height times 5 to set scrollHeight
            objs:{
                container: document.querySelector('#scroll-section-3'),
                canvasCaption: document.querySelector('.canvas-caption'),
                canvas: document.querySelector('.image-blend-canvas'),
                context: document.querySelector('.image-blend-canvas').getContext('2d'),
                imagesPath: [
                    './images/blend-image-1.jpg',
                    './images/blend-image-2.jpg',
                ],
                images:[]
            },
            values: {
                rect1X: [0,0,{start:0, end:0}],
                rect2X: [0,0,{start:0, end:0}],
                rectStartY: 0,
            }
        },
    ]

    function setCanvasImages(){
        let imgElem;
        for(let i =0; i < sceneInfo[0].values.videoIMageCount; i++){
            imgElem = document.createElement('img');
            // imgElem = new Image()
            imgElem.src = `./video/001/IMG_${6726+i}.JPG`;
            sceneInfo[0].objs.videoImages.push(imgElem);
        }

        let imgElem2;
        for(let i =0; i < sceneInfo[2].values.videoIMageCount; i++){
            imgElem2 = document.createElement('img');
            // imgElem = new Image()
            imgElem2.src = `./video/002/IMG_${7027+i}.JPG`;
            sceneInfo[2].objs.videoImages.push(imgElem2);
        }

        let imgElem3;
        for(let i =0; i< sceneInfo[3].objs.imagesPath.length; i++){
            imgElem3 = new Image();
            imgElem3.src = sceneInfo[3].objs.imagesPath[i];
            sceneInfo[3].objs.images.push(imgElem3)
        }
    }

    // store images into array
    setCanvasImages();

    function setLayout(){
        // each scroll section's height set
        for(let i =0; i < sceneInfo.length; i++){
            // however, when type is normal, we set to contents height because no need to animation
            if(sceneInfo[i].type==='sticky'){
                sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
                sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`
            }else{
                sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight;
            }
            sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;


        }

        yOffset = 0;
        let totalScrollHeight = 0;
        for(let i = 0; i< sceneInfo.length; i++){
            totalScrollHeight += sceneInfo[i].scrollHeight;
            if(totalScrollHeight >= yOffset){
                currentScene = i;
                break;
            }
        }
        document.body.setAttribute('id', `show-scene-${currentScene}`);

        const heightRatio = window.innerHeight/1080;
        // multiply window ratio to the current browser's height
        sceneInfo[0].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`;
        sceneInfo[2].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`;

    }


    // the ratio of current scrolled values in terms of Y offset
    function calcValues(values, currentYOffset){
        let rv;
        const scrollHeight = sceneInfo[currentScene].scrollHeight;
        // current Scene, scrolled section need to be factored
        let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight;

        // specific start ~ specific end animation activated
        if(values.length ===3){
            const partScrollStart = values[2].start * scrollHeight;
            const partScrollEnd = values[2].end * scrollHeight;
            const partScrollHeight = partScrollEnd - partScrollStart;

            if(currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd){
                rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]
            }else if(currentYOffset < partScrollStart){
                rv = values[0];
            }else if(currentYOffset > partScrollEnd){
                rv =values[1];
            }
        } else{
            rv = scrollRatio * (values[1] - values[0]) + values[0]
        }

        return rv;
    }

    function playAnimation(){
        const objs = sceneInfo[currentScene].objs;
        const values = sceneInfo[currentScene].values;
        const currentYOffset = yOffset - prevScrollHeight;

        //current scene's ratio current height
        const scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight;

        switch(currentScene){
            case 0:
                // getting the sequence and scrolls of it
                let sequence = Math.round(calcValues(values.imageSequence, currentYOffset));
                objs.context.drawImage(objs.videoImages[sequence], 0, 0);
                objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset);

                // scrolling and interaction with texts
                if (scrollRatio <= 0.22){
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity, currentYOffset);
                    objs.messageA.style.transform = `translateY(${calcValues(values.messageA_translateY_in, currentYOffset)}%)`;

                }else{
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset);
                    objs.messageA.style.transform = `translateY(${calcValues(values.messageA_translateY_out, currentYOffset)}%)`;
                }

                if(scrollRatio <= 0.42){
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity, currentYOffset);
                    objs.messageB.style.transform = `translateY(${calcValues(values.messageB_translateY_in, currentYOffset)}%)`;
                }
                else{
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset);
                    objs.messageB.style.transform = `translateY(${calcValues(values.messageB_translateY_out, currentYOffset)}%)`;
                }

                if(scrollRatio <= 0.62){
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity, currentYOffset);
                    objs.messageC.style.transform = `translateY(${calcValues(values.messageC_translateY_in, currentYOffset)}%)`;
                }
                else{
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset);
                    objs.messageC.style.transform = `translateY(${calcValues(values.messageC_translateY_out, currentYOffset)}%)`;
                }

                if(scrollRatio <= 0.82){
                    objs.messageD.style.opacity = calcValues(values.messageD_opacity, currentYOffset);
                    objs.messageD.style.transform = `translateY(${calcValues(values.messageD_translateY_in, currentYOffset)}%)`;
                }
                else{
                    objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset);
                    objs.messageD.style.transform = `translateY(${calcValues(values.messageD_translateY_out, currentYOffset)}%)`;
                }


                //css
                break;
            case 1:
                break;
            case 2:
                // getting the sequence and scrolls of it
                let sequence2 = Math.round(calcValues(values.imageSequence, currentYOffset));
                objs.context.drawImage(objs.videoImages[sequence2], 0, 0);
                objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset);

                // this is only for canvas opacity
                if(scrollRatio <= 0.5){
                    //in
                    objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset);
                }else{
                    //out
                    objs.canvas.style.opacity = calcValues(values.canvas_opacity_out, currentYOffset);
                }


                if (scrollRatio <= 0.22){
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity, currentYOffset);
                    objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`;

                }else{
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset);
                    objs.messageA.style.transform = `translateY(${calcValues(values.messageA_translateY_out, currentYOffset)}%)`;
                }

                if(scrollRatio <= 0.57){
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity, currentYOffset);
                    objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`;
                    objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`;
                }
                else{
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset);
                    objs.messageB.style.transform = `translateY(${calcValues(values.messageB_translateY_out, currentYOffset)}%)`;
                }

                if(scrollRatio <= 0.79){
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity, currentYOffset);
                    objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`;
                    objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`;

                }
                else{
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset);
                    objs.messageC.style.transform = `translateY(${calcValues(values.messageC_translateY_out, currentYOffset)}%)`;
                    objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`;
                }

                break;
            case 3:
                // fill out the height and cross
                console.log('in case 3')
                // these ratios are required for getting the width and height ratio
                // const widthRatio = window.innerWidth / objs.canvas.width;
                const widthRatio = window.innerWidth / objs.canvas.width;
                const heightRatio = window.innerHeight / objs.canvas.height;
                // const heightRatio = window.innerHeight / objs.canvas.height;
                let canvasScaleRatio;

                if(widthRatio <= heightRatio){
                    //when brwoser is thinner than canvas
                    canvasScaleRatio = heightRatio;
                    console.log('height Ratio has been decided');
                }else{
                    // when browser is fatter than canvas
                    canvasScaleRatio = widthRatio;
                    console.log('widthRatio decided')
                }
                objs.canvas.style.transform = `scale(${canvasScaleRatio})`;
                // objs.canvas.style.height = String(canvasScaleRatio * 1080);
                // objs.canvas.style.width = String(canvasScaleRatio * 1920);
                objs.context.drawImage(objs.images[0],0,0);

                // fit to canvas size, innerwidth and innerHeight
                const recalculatedInnerWidth = window.innerWidth / canvasScaleRatio;
                const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio;

                if(!values.rectStartY){
                    // values.rectStartY = objs.canvas.getBoundingClientRect().top;
                    values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2;

                    values.rect1X[2].end = values.rectStartY / sceneInfo[3].scrollHeight;
                    values.rect2X[2].end = values.rectStartY / sceneInfo[3].scrollHeight;
                }

                console.log(values.rect2X[2])

                const whiteRectWidth = recalculatedInnerWidth * 0.15;
                values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) /2;
                values.rect1X[1] = values.rect1X[0] - whiteRectWidth;
                values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth;
                values.rect2X[1] = values.rect2X[0] + whiteRectWidth;

                // left right white box drawing

                objs.context.fillRect(
                    parseInt(calcValues(values.rect1X, currentYOffset)),
                    0,
                    parseInt(whiteRectWidth),
                    objs.canvas.height
                );
                console.log(parseInt(calcValues(values.rect2X, currentYOffset)),'should inccrease', currentYOffset)
                objs.context.fillRect(
                    parseInt(calcValues(values.rect2X, currentYOffset)),
                    0,
                    parseInt(whiteRectWidth),
                    objs.canvas.height
                );
                // objs.context.fillRect(values.rect2X[0],0, parseInt(whiteRectWidth), recalculatedInnerHeight);
                break;
        }
    }


    //increase the current scene and calculate prevScrollHeight of current scene
    function scrollLoop(){
        enterNewScene = false;
        prevScrollHeight = 0
        for(let i =0; i < currentScene; i++){
            prevScrollHeight += sceneInfo[i].scrollHeight;
        }

        if(yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight && currentScene < sceneInfo.length-1){
            currentScene ++;
            enterNewScene = true;
            document.body.setAttribute('id', `show-scene-${currentScene}`);
        }

        if(yOffset < prevScrollHeight){
            if(currentScene===0) return;
            currentScene --;
            enterNewScene = true;
            document.body.setAttribute('id', `show-scene-${currentScene}`);
        }

        if(enterNewScene) return;
        playAnimation();
    }

    //whenever browser resizes
    window.addEventListener('scroll', () => {
        // call necessary function in here
        yOffset = window.pageYOffset;
        scrollLoop();
    })
    // window.addEventListener('DOMContentLoaded', setLayout);
    window.addEventListener('load',() => {
        setLayout();
        sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0],0,0);
    })
    window.addEventListener('resize', setLayout);
})();
</code></pre>

오류

<p>업데이트: 우선 앱은 동작을 합니다만, pm2 monit에서 제대로된 로깅이 되고있는거 같지는 않습니다. 고로, 로그인을 함에도 불구하고 로그인되었다고 인식을 하지 못하네요...</p>

백엔드 address in use

<p>동호님!<br />괜찮습니다. 현제 다시 진행중인데, setup.js에서 이번에는 에러가 뜨네요. 정말 토시하나 안틀리고 하신대로 다 따라서했는데 나오는 에러는 이렇습니다.</p>
<p>&nbsp;</p>
<p>your test suite must contain at least one test.</p>
<p>&nbsp;</p>
<p>제 생각인데, tests폴더 안에있으면 test가 무조건 하나정도 있어야 되는거같네요. 그렇지만 setup.js는 테스트가 하나도 없어서 에러가 뜨네요. 하지만, 동호님 강의에서는 테스트가없어서....저도 참 의문이네요. 혹시 추천해주실 방법이있나요?</p>
<p>&nbsp;</p>

enzyme?

<p>버전이 틀리기는 합니다만, 제가 갖고있는것들이 다 업그레이드 버전이네요.<br /><br />react : 16.8.6</p>
<p>react-native: 0.59.9</p>
<p>enzyme: 3.10.0</p>
<p>enzyme-adapter-react-16: 1.14.0</p>
<p>&nbsp;</p>
<p>혹시 이것들을 다운그레이드 시켜야될까요?</p>

<p>아 네. 그 부분은 저도 인지하고 있었습니다. 제가 여쭤봤던 original 질문으로 돌아가자면, &nbsp;동호님의 코드는 태스트를 돌렸을때,</p>
<p>&nbsp;</p>
<p>Received: text</p>
<p>&nbsp;</p>
<p>가 나오고, 저같은경우는&nbsp;</p>
<p>&nbsp;</p>
<p>Received: <Touchable Text></p>
<p>&nbsp;</p>
<p>가 나옵니다. 이 틀린 부분이 결국 에러를 일으키고있으니, app.js를 봐달라고 한고였습니다.</p>
<p>&nbsp;</p>
<p>혹시 어떤 부분이 잘못 되었을까요?</p>

<p>네!</p>
<p>App-test.js</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #6a9955;">/**</span></div>
<div><span style="color: #6a9955;"> * </span><span style="color: #569cd6;">@format</span></div>
<div><span style="color: #6a9955;"> */</span></div>
<br />
<div><span style="color: #c586c0;">import</span> <span style="color: #ce9178;">'react-native'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">App</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'../src/App'</span>;</div>
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Text</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react-native'</span>;</div>
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">shallow</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'enzyme'</span>;</div>
<br />
<div><span style="color: #dcdcaa;">describe</span>(<span style="color: #ce9178;">'Jest'</span>, ()<span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #dcdcaa;">it</span>(<span style="color: #ce9178;">'is it working?'</span>, () <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">a</span> = <span style="color: #b5cea8;">1</span>;</div>
<div><span style="color: #dcdcaa;">expect</span>(<span style="color: #9cdcfe;">a</span> + <span style="color: #b5cea8;">1</span>).<span style="color: #dcdcaa;">toBe</span>(<span style="color: #b5cea8;">2</span>)</div>
<div>})</div>
<div>})</div>
<br />
<div><span style="color: #dcdcaa;">describe</span>(<span style="color: #ce9178;">'Enzyme'</span>, () <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #dcdcaa;">it</span>(<span style="color: #ce9178;">'is it working?'</span>, () <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">text</span> = <span style="color: #ce9178;">'some text'</span>;</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">wrapper</span> = <span style="color: #dcdcaa;">shallow</span>(<span style="color: #808080;"><</span><span style="color: #4ec9b0;">Text</span><span style="color: #808080;">></span>text<span style="color: #808080;"></</span><span style="color: #4ec9b0;">Text</span><span style="color: #808080;">></span>);</div>
<div><span style="color: #dcdcaa;">expect</span>(<span style="color: #9cdcfe;">wrapper</span>.<span style="color: #dcdcaa;">text</span>()).<span style="color: #dcdcaa;">toBe</span>(<span style="color: #9cdcfe;">text</span>);</div>
<div>})</div>
<div>})</div>
</div>
<p>setup.js</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">configure</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'enzyme'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">Adapter</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'enzyme-adapter-react-16'</span>;</div>
<br />
<div><span style="color: #dcdcaa;">configure</span>({ <span style="color: #9cdcfe;">adapter:</span> <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Adapter</span>() });</div>
</div>

<p>해결 하였습니다! 감사합니다!</p>

jest - type error 

<p>말씀하신 것으로 진행을 해보아도 똑같은 에러가 뜨네요. 저의 App.spec.js파일입니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #c586c0;">import</span> <span style="color: #ce9178;">'react-native'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">App</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'../src/App'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">format</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'path'</span>;</div>
<br />
<div><span style="color: #dcdcaa;">describe</span>(<span style="color: #ce9178;">'Jest'</span>, ()<span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #dcdcaa;">it</span>(<span style="color: #ce9178;">'is it working?'</span>, () <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #9cdcfe;">a</span> = <span style="color: #b5cea8;">1</span>;</div>
<div><span style="color: #dcdcaa;">expect</span>(<span style="color: #9cdcfe;">a</span> + <span style="color: #b5cea8;">1</span>).<span style="color: #dcdcaa;">toBe</span>(<span style="color: #b5cea8;">2</span>)</div>
<div>})</div>
<div>})</div>
</div>
<p>참고로, tests라는 폴더가 없어서 제가 수동으로 만들었습니다. 물론 그 과정에서 app.spec.js파일도 제가 만들었구요.</p>

jgam

Posts