web-dev-qa-db-ja.com

ジェストと酵素のuseStateフックの初期状態を設定するにはどうすればよいですか？

現在私は機能フックと反応フックを使用しています。しかし、useStateフックを完全にテストすることはできません。次のようなシナリオを考えてみましょう。useEffectフックで、API呼び出しを行って、useStateに値を設定しています。 jest/enzymeの場合、テストするモックデータがありますが、jestのuseStateの初期状態値を設定できません。

const [state, setState] = useState([]);

Jestのオブジェクトの配列として初期状態を設定したい。クラスコンポーネントのようなsetState関数は見つかりませんでした。

javascriptreactjsenzymereact-hooksreact-hooks-testing-library
9
Srigar

あなたはモックすることができますReact.useStateテストで別の初期状態を返すには：

// Cache original functionality
const realUseState = React.useState

// Stub the initial state
const stubInitialState = ['stub data']

// Mock useState before rendering your component
jest
  .spyOn(React, 'useState')
  .mockImplementationOnce(() => realUseState(stubInitialState))

参照：https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga

7
Jimmy

私が正しく思い出した場合、useStateやuseEffectのような組み込みフックをモックアウトしないようにしてください。酵素のinvoke()を使用して状態の変更をトリガーすることが難しい場合は、コンポーネントが分割されることでメリットが得られることを示している可能性があります。

5
hesto2
  • 以下の関数は状態を返します
_const setHookState = (newState) => jest.fn().mockImplementation(() => [
  newState,
  () => {},
]);
_
  • 反応を使用するには、以下を追加してください

const reactMock = require('react');

あなたのコードでは、この作業にはReact.useState()を使用する必要があります。そうしないと機能しません。

const [arrayValues, setArrayValues] = React.useState();

const [isFetching, setFetching] = React.useState();

  • 次に、テストに以下のモック状態値を追加します

reactMock.useState = setHookState({ arrayValues: [], isFetching: false, });

インスピレーション： 後藤

0
ireshika piyumalie