Question

我有一个简单的应用程序，我使用 axios 从 API 获取 UserList。这是我的应用组件：

import React,{useState,useEffect} from 'react';
import axios from 'axios';

import UserList from './components/Users/UserList';


function App() {

const [users,setUsers] = useState([]);

useEffect(()=>{
  axios.get('https://reqres.in/api/users?page=2')
  .then(response =>{
      setUsers(response.data.data);
      console.log(response.data);
      
      
  })
  .catch(error =>{
    console.log(error)
  })
}, [])

  

  return (
    <div>
      
      <UserList users={users} />
    </div>
  );
}

export default App;

我有 UserList 组件：

import React from 'react';
import classes from './UserList.module.css';
import Card from '../UI/Card';

const UserList = (props) => {




    return (
        <Card className={classes.users}>
            <ul data-testid="ultest">
                {props.users.map(user => <li key={user.id}>
                    <img src={user.avatar} alt={user.id}></img>
                    <div>{user.first_name}  {user.last_name}
                        <p><a href={`mailto:${user.email}`}>{user.email}</a></p>
                    </div>
                </li>)}
            </ul>

        </Card>
    )
}

export default UserList;

我不明白如何测试 UserList 组件。我想测试它是否正确呈现，但我总是得到：类型错误：无法读取未定义的属性“地图” 当我使用渲染。测试此组件的最佳方法是什么？玩笑或测试库。任何建议将不胜感激。

import React from 'react';
import { render} from '@testing-library/react';

import UserList from '../components/Users/UserList';
import '@testing-library/jest-dom/extend-expect';




test('to check if it renders', () => {
    
    
       render (<UserList />)
      
    
      
      
    
    
  });

Answer 1

嘿——你需要这样做：


test('to check if it renders', () => {    
    render(<UserList users={someUsersDataHere}/>)
});

所以你的组件可以有用户来映射。如果您有任何机会，您将需要手动定义一些用户数组或从其他地方导入数据

const someUsersDataHere = [
   {name: 'SomeName'},
   ....and so on
]

测试反应组件

1 个答案: