react-native - 使用 testing-library/react-native 在 react native 中集成测试以获取动态下拉列表
问题描述
当下拉列表的数据是静态的时,我已经编写了测试用例下拉列表它的工作正常
但它在动态数据上失败了
所以我使用rest.get(baseURL + /location/getstates
, (req, res, ctx)调用该 api ,然后我手动设置响应仍然出现错误
有什么建议吗?我哪里出错了?
import React from 'react';
import {
fireEvent,
render,
waitFor,
cleanup,
} from '@testing-library/react-native';
import {rest} from 'msw';
import {setupServer} from 'msw/node';
import {act, renderHook} from '@testing-library/react-hooks';
import EditProfile from '../Profile/ProfilEdit/InvestmentPreference';
import '@testing-library/jest-dom';
import {store} from '../../redux/store';
import {Provider} from 'react-redux';
import '@testing-library/jest-dom/extend-expect';
import {NavigationContainer} from '@react-navigation/native';
import {baseURL, postApi} from '../../helpers/api';
import AddProperty from '../Property/AddProperty';
const server = setupServer(
rest.post(baseURL + `/property`, (req, res, ctx) => {
console.log('res', req.body);
return res(ctx.json({data: {data: {_id: '123'}}}));
}),
rest.get(baseURL + `/location/getstates`, (req, res, ctx) => {
console.log('res', res);
return res(
ctx.json({
data: {
data: [
{_id: '602fa607441edd89c26a9f82', name: 'Delhi'},
{_id: '602fab68441edd89c26a9fe5', name: 'Gujarat'},
{_id: '600977053d18389683c8babd', name: 'Karnataka'},
{_id: '60097b65314a69997cf5593f', name: 'Maharashtra'},
{_id: '602fab86441edd89c26a9fe6', name: 'Tamil Nadu'},
{_id: '60097d1b314a69997cf55940', name: 'Telangana'},
{_id: '602fab54441edd89c26a9fe4', name: 'West Bengal'},
],
},
}),
);
}),
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
function renderWithRedux(component) {
return {
...render(
<Provider store={store}>
<NavigationContainer>{component}</NavigationContainer>
</Provider>,
),
};
}
describe('AddProperty Screen', () => {
it('should validate form', async () => {
const callback = jest.fn();
const navigation = {navigate: callback};
const {getByTestId, getByPlaceholderText, getByText, getByDisplayValue} =
renderWithRedux(
<AddProperty navigation={navigation} route={{params: {id: '123'}}} />,
);
const PropertyName = getByPlaceholderText('Property Name');
const Khata = getByPlaceholderText('Khata');
const ROI = getByPlaceholderText('Enter ROI');
const EnterAmount = getByPlaceholderText('Enter Amount');
const PropertySize = getByPlaceholderText('Enter Property Size');
const BuildupArea = getByText('Buildup Area');
const propertyStatus = getByText(new RegExp('Add Property Status', 'g'));
fireEvent.press(propertyStatus);
fireEvent.press(getByText(new RegExp('For Sale', 'g')));
const propertyCurrentStatus = getByText(
new RegExp('Add Property Position', 'g'),
);
fireEvent.press(propertyCurrentStatus);
fireEvent.press(getByText(new RegExp('Rented', 'g')));
const states = getByText(new RegExp('Select State', 'g'));
fireEvent.press(states);
fireEvent.press(getByText(new RegExp('Delhi', 'g')));
expect(PropertyName).toBeDefined();
expect(Khata).toBeDefined();
expect(ROI).toBeDefined();
expect(BuildupArea).toBeDefined();
expect(EnterAmount).toBeDefined();
expect(PropertySize).toBeDefined();
解决方案
对于异步函数,我们必须使用 findByText 而不是 getByText。以下代码将解决该问题,请查看文档以获取更多信息https://testing-library.com/docs/example-findbytext/
const states = await findByText(new RegExp('Select State', 'g'));
推荐阅读
- http - 托管没有端口转发的服务器
- java - 如何修复此功能它总是返回 false
- python - Python 2.7:setlogmask(0) 不禁用系统日志
- javascript - 什么事件会触发点击释放-Javascript/Reactjs
- http - 是否应该有最大 HTTP 请求大小 - 标准是什么?
- linux - 循环 0xb7 组装但不会链接
- django - django + nginx on docker bad request (400)
- latex - 乳胶中引用的出现顺序
- ios - 您可以使用 Swift 在一条语句中聚合非规范化的解析服务器查询结果吗?
- python - 将单个值从一列复制到满足条件的另一列