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 
    });
  });
});

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

1 个答案: