web-dev-qa-db-ja.com

react-native-testing-library：useEffectをactでテストする方法

反応ネイティブコンポーネントをテストするためにreact-native-testing-libraryを使用しています。私はコンポーネントを持っています（この投稿の目的のために、それは過度に簡略化されています）：

export const ComponentUnderTest = () => {

 useEffect(() => {
   __make_api_call_here_then_update_state__
 }, [])

 return (
   <View>
     __content__goes__here
   </View>
 )
}

これが私の（簡略化された）component.spec.tsxです。

import { render, act } from 'react-native-testing-library';
import { ComponentUnderTest } from './componentundertest.tsx';

test('it updates content on successful call', () => {
   let root;
   act(() => {
      root = render(<ComponentUnderTest />); // this fails with below error message
   });    
   expect(...);
})

このコードを実行すると、次のエラーが発生します：Can't access .root on unmounted test renderer

enter image description here

このエラーメッセージの意味は今でもわかりません。 react-native-testing-libraryのテスト方法については、act and useEffectのドキュメントに従いました。

どんな助けでも大歓迎です。ありがとう

react-nativeuse-effectactreact-native-testing-library
4
TheSoul
root = render(<ComponentUnderTest />);

する必要があります

 root = create(<ComponentUnderTest />);

----完全なコードスニペット。上記の変更後に私のために働く

import React, { useState, useEffect } from 'react'
import { Text, View } from 'react-native'
import { render, act } from 'react-native-testing-library'
import { create } from 'react-test-renderer'

export const ComponentUnderTest = () => {
  useEffect(() => {}, [])

  return (
    <View>
      <Text>Hello</Text>
    </View>
  )
}

test('it updates content on successful call', () => {
  let root
  act(() => {
    root = create(<ComponentUnderTest />) 
  })
})
1
helloworld

次の手順で私のケースは解決しました：

  • Reactとreact-test-rendererのバージョンを16.9以降にアップグレードして、async内のact関数をサポートします（両方のパッケージは、私の知る限り同じバージョンである必要があります）

  • @helloworldが提案したように、react-native-testing-libraryのrenderをreact-test-rendererのcreateに置き換えます（ありがとうございます、助かります）

  • テスト関数をasyncにし、actの前にawaitを付け、それにasync関数を渡す

最終結果は次のようになります。

test('it updates content on successful call', async () => {
  let root
  await act(async () => {
    root = create(<ComponentUnderTest />) 
  })
})
1
FIIFE