使用 testing-library/react-native 在 react native 中集成测试以获取动态下拉列表答案

【问题标题】：integration testing in react native for dynamic dropdown list using testing-library/react-native使用 testing-library/react-native 在 react native 中集成测试以获取动态下拉列表
【发布时间】：2021-07-22 06:55:27
【问题描述】：

当下拉列表的数据为静态时，我已经编写了测试用例下拉列表，它的工作正常

但它在动态数据上失败

所以我使用 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();

【问题讨论】：

标签： react-native testing jestjs

【解决方案1】：

对于异步函数，我们必须使用 findByText 而不是 getByText。以下代码将解决问题，更多信息请查看文档https://testing-library.com/docs/example-findbytext/

const states = await findByText(new RegExp('Select State', 'g'));

【讨论】：