我可以使用 Jest 和 Enzyme 测试将数据映射到子组件的函数吗

Question

我正在进行一个返回对象数组的 API 调用。然后我将这些对象映射到一个子组件上。我对如何测试这一点的想法是使用 Jest 模拟 API 调用并测试以查看渲染的子组件的数量是否等于对象的数量。我实际上不确定我是否需要模拟 API 调用，并认为只声明一个数组并使用它可能更简单。

这是我将用于 API 调用返回的数组示例。

let organizationRoles = [
    {name : "2nd Project Manager", assigned : false}, 
    {name : "Executive Sponser", assigned: false}, 
    {name : "CFO or Finance Contact", assigned: false},
    {name : "OI&T Contact", assigned: false},
    {name : "Payroll Contact", assigned: false},
    {name : "HR Contact", assigned: false}
]

这是我要运行的测试。

it('renders the appropriate number of cards', () => {
    const wrapper = mount(<AssignRoles />);
    const cardHolder = wrapper.find('#assign-roles-roles-page');
    expect(cardHolder.children()).toHaveLength(organizationRoles.length)
})

我的主要问题是我还没有弄清楚在哪里注入数组。

这是我想从 AssignRoles 组件中测试的代码。

<div className={styles.rolesPage} id="assign-roles-roles-page">
   {organizationRoles.map((roles, key)=> {
       return(<AssignRolesCard name={roles.name} assignee={roles.assignee} id={key} handleFormOpen={handleFormOpen}/>)
   })}
</div>

这里要求的是我的 API 调用：

axios
      .get(URL, config)
      .then(response => {
        const organizationRoles = response.data;
      })
      .catch(error => {
        if (error.response.status === 401 && token) {
          this.renewToken();
        }
      });

我对 Jest 测试还很陌生，想了解如何在我的测试中更好地使用模拟。

Answer 1

这主要取决于您要测试的实现。因此，如果您的组件负责从 API 获取数据，您应该模拟组件中使用的函数

例如

import axios from 'axios';

jest.mock('axios');

describe('given a component that is fetching data using fetch', () => {

  describe('if the api retuns someData', () => {
    let wrapper;
    beforeAll(() => {
      axios.get.mockResolvedValue(someData);
      wrapper = shallow(<MyComponent />);
    });
    it('should render X', () => {
      expect(wrapper). // assert something 
    });
  });

  describe('if the api returns some other data, () => {
    let wrapper;
    beforeAll(() => {
      axios.get.mockResolvedValue(someOtherData);
      wrapper = shallow(<MyComponent />);
    });
    it('should render Y', () => {
      expect(wrapper). // assert something 
    });
  });
});

如果您的组件将数据作为属性接收，您应该在测试中将数据作为属性提供：

describe('given a component that receives data as prop', () => {
  describe('with some other data, () => {
    let wrapper;
    beforeAll(() => {
      wrapper = shallow(<MyOtherComponent data={someOtherData} />);
    });
    it('should render X', () => {
      expect(wrapper). // assert something 
    });
  });
});