我正在进行 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)
})
我的主要问题是我还没有弄清楚在哪里注入(inject)数组。
这是我要从我的 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 测试还很陌生,想了解如何在我的测试中更好地使用模拟。
最佳答案
这主要取决于您要测试的实现。因此,如果您的组件负责从 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
});
});
});
关于javascript - 我可以使用 Jest 和 Enzyme 测试将数据映射到子组件的函数吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58559394/