2

我想在 Jest 中测试我的组件，并且它正确显示获取的数据。我有以下组件，它有一个useEffect调用函数的钩子getData。getData获取到后端 API，将响应转换为json，然后返回json给组件。然后数据更新状态并显示在屏幕上。返回的数据是一个非常简单的数组，如下所示：[{ title: "test", id: 1 }, ...].

import React, { useEffect, useState } from "react";
import { FlatList, Text, View } from "react-native";

import { getData } from "./getData"; // <- returns an array

const MyComponent = () => {

  const [data, setData] = useState([]);

  useEffect(() => {
    (async() => {
      const returnedArray = await getData(); // <- returns an array
      setData(returnedArray);
    })();
  }, []);

  return (
    <View>
      <FlatList
        data={ data }
        renderItem={item => <Text>{item.title}</Text>}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

我想运行以下测试，尝试在global.fetch.

import * as React from 'react';
import { render, act } from '@testing-library/react-native';
import MyComponent from './MyComponent';

global.fetch = jest.fn(() => Promise.resolve({
  title: "test",
  id: 1
}));

describe('Testing react native', () => {
  it('displays data from useEffect hook', async () => {

    const { getByText } = await act(async () => render(<MyComponent />));

    const title = getByText("test");

    expect(title).toBeTruthy();
  });
}

此测试失败并出现以下错误：

Can't access .root on unmounted test renderer

有人可以帮助我了解测试从useEffect钩子中获取数据的组件的正确方法Jest吗？谢谢。

4

0 回答 0