[HW2] component.find 관련 질문입니다

[dreamsh19]

HW2 테스트 구현하다가 의문이 생겨 질문 드립니다.

preview-tab-button을 찾아 클릭하는 것을 구현하기 위해 아래와 같은 코드를 작성하였습니다.

    it('should call clickPreviewHandler', () => {
        const component = mount(ArticleCreatePage);
        console.log(component.debug())
        let wrapper = component.find('#preview-tab-button');
        expect(wrapper.length).toBe(1)
        wrapper.simulate('click');
        wrapper = component.find('.previewTab')
        expect(wrapper.length).toBe(1)

    });

디버그 출력 결과 아래와 같이 preview-tab-button이 렌더링이 제대로 되었는데

 FAIL  src/containers/articlesPage/articleCreatePage/articleCreatePage.test.js (26.563s)
  ● Console

    console.log src/containers/articlesPage/articleCreatePage/articleCreatePage.test.js:103
      <Provider store={{...}}>
        <Connect(ConnectedRouterWithContext) history={{...}}>
          <ConnectedRouterWithContext history={{...}} onLocationChanged={[Function: onLocationChanged]}>
            <ConnectedRouter store={{...}} history={{...}} onLocationChanged={[Function: onLocationChanged]}>
              <Router history={{...}}>
                <Switch>
                  <Route path="/" exact={true} component={{...}} location={{...}} computedMatch={{...}}>
                    <Connect(articleCreatePage) history={{...}} location={{...}} match={{...}} staticContext={[undefined]}>
                      <articleCreatePage history={{...}} location={{...}} match={{...}} staticContext={[undefined]} currentUser={{...}} articles={{...}} onStoreCreateArticle={[Function: onStoreCreateArticle]} onLogout={[Function: onLogout]} onGetUsers={[Function: onGetUsers]}>
                        <div className="articleCreatePage">
                          <h1>
                            THIS IS ARTICLE CREATE PAGE
                          </h1>
                          <div className="currentTab">
                            <div className="writeTab">
                              <h2>
                                THIS IS WRITE TAB
                              </h2>
                              <label>
                                Title
                              </label>
                              <textarea id="article-title-input" value="" onChange={[Function: onChange]} />
                              <label>
                                Content
                              </label>
                              <textarea id="article-content-input" value="" onChange={[Function: onChange]} />
                              <button id="back-create-article-button" onClick={[Function: onClick]}>
                                BACK CREATE ARTICLE
                              </button>
                              <button id="confirm-create-article-button" disabled={true} onClick={[Function: onClick]}>
                                CONFIRM
                              </button>
                              <button id="preview-tab-button" onClick={[Function: onClick]}>
                                PREVIEW
                              </button>
                              <button id="write-tab-button" onClick={[Function: onClick]}>
                                WRITE
                              </button>
                            </div>
                          </div>
                          <button id="logout-button" onClick={[Function: onClick]}>
                            LOG OUT
                          </button>
                        </div>
                      </articleCreatePage>
                    </Connect(articleCreatePage)>
                  </Route>
                </Switch>
              </Router>
            </ConnectedRouter>
          </ConnectedRouterWithContext>
        </Connect(ConnectedRouterWithContext)>
      </Provider>
    console.log src/containers/articlesPage/articleCreatePage/articleCreatePage.test.js:112
      <Provider store={{...}}>
        <Connect(ConnectedRouterWithContext) history={{...}}>
          <ConnectedRouterWithContext history={{...}} onLocationChanged={[Function: onLocationChanged]}>
            <ConnectedRouter store={{...}} history={{...}} onLocationChanged={[Function: onLocationChanged]}>
              <Router history={{...}}>
                <Switch />
              </Router>
            </ConnectedRouter>
          </ConnectedRouterWithContext>
        </Connect(ConnectedRouterWithContext)>
      </Provider>

  ● <ArticleCreatePage /> › should call clickPreviewHandler

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      112 |         console.log(component.debug())
      113 |         let wrapper = component.find('#preview-tab-button');
    > 114 |         expect(wrapper.length).toBe(1)
          |                                ^
      115 |         wrapper.simulate('click');

find결과는 0으로 나와 해결방법을 여쭙고자 질문드립니다.

[kyunggeunlee]

다른 id들(예를 들어 write-tab-button 등)에 대해서도 전부 같은 문제가 발생하나요?

[dreamsh19]

해당 콘솔 출력 결과가 다른 줄에서 찍은 결과였네요.. 혼란을 드려 죄송합니다. 올린 출력 결과 아래부분에 해당 결과가 있고 그 결과를 보니 렌더링이 안되고 있네요..

[HaeSe0ng]

const myInstance= component.find(클래스명.WrappedComponent).instance(); myInstance.setState(스테이트);

와 같은 식으로 스테이트를 변경할 수 있습니다!

[dreamsh19]

앗 답변 감사합니다! 큰 도움이 되었습니다