web-dev-qa-db-ja.com

react-redux useSelectorのテスト

私はreact-redux、useSelectorを使用してストアからデータを取得するreactアプリケーションを持っています。反応コンポーネントは

function PersonDataView() {
  const name= useSelector(state => state.data.name)
  const dob= useSelector(state => state.data.dob)
  const dispatch = useDispatch()
  const show= () => dispatch({type: 'SHOW'})
  const remove= () => dispatch({type: 'REMOVE'})
  return (
    <div>
      <h2>Person Details</h2>
     <div>
      <button onClick={show}>Show</button>
      <span aria-label="name">{name}</span>
      <span aria-label="dob">{dob}</span>
      <button onClick={remove}>Remove</button>
     </div>
   </div>
  )
}

このコンポーネントをテストするためにreact-testing-libraryを使用しています。これらのコンポーネントのテストを簡単にするAPIはありますか？私はこれらをテストする2つの方法を知っています。1）redux-mock-storeを使用してストアをモックし、このコンポーネントをプロバイダーコンポーネントの下にラップできます。 2）jestのuseSelectorメソッドをモックします

jest.mock('react-redux', () => ({
  useSelector: () => ({
  })
});

ただし、jest mockを使用する際の問題は、複数のセレクターの場合です。すべてのuseSelectorsが同じモック値を返します。 jestのモック方法を使用すると、jest.fn（）。mockReturnValueOnce（）は私には正しく見えません。

reactjsunit-testingreact-reduxreact-hooks
2
Krishna

別のアプローチをお勧めします-セレクターを別のファイルに抽出します。ファイルselectors.js：

const nameSelector = state => state.data.name;
const dobSelector = state => state.data.dob;

次に、テストでは、以下のようにuseSelectorをモックできます。

jest.mock('react-redux', () => ({
  useSelector: jest.fn().mockImplementation(selector => selector()),
});

そして、セレクターを個別にモックします：

jest.mock('./selectors.js', () => ({
  nameSelector: jest.fn().mockReturnValue("myTestName"),
  dobSelector: jest.fn().mockReturnValue("myTestDob"),
});
1
Emzaw

これを試して：

jest.mock('react-router');
const useSelectorMock = useSelector as any;

describe('something', () {

test('name', () => {

// Use this for each useSelector call:
useSelectorMock.mockImplementationOnce(jest.fn(() => returnValue as yourType));
}

}
0
Lakitu3232