用 Jest 測試一個 React 組件

Question

我有一個像下面這樣的組件，如何對我標記的兩條線進行開玩笑測試？ 太感謝了

class App extends React.Component {
    constructor(props) {
      super(props);

       ...
      );
    }
    ...
    render() {
      ...
      if (props && props.context) {                        // need jest testing
        props.context.index = props.context.index || {};   // need jest testing
      }
      
      return <App {...props} />;
    }
  }

Answer 1

您根本不應該重新分配道具值。 您正在做的事情應該通過默認道具來解決。 如果您需要一個組件來更新一個值，那么您應該利用 state。

class App extends React.Component {
  // ...
}

App.defaultProps = {
  context: {
    index: {},
  },
};

至於測試這些默認道具，這完全取決於您打算測試什么。 您是否需要斷言組件的 state 是響應那些道具的某個值？ 您是否需要斷言組件的結果 HTML 以特定方式呈現，或者 function 導致特定的副作用等？