Jest.js React Native测试库fireEvent.press未触发onPress

fnatzsnv  于 2022-12-08  发布在  Jest
关注(0)|答案(2)|浏览(187)

我尝试在React Native中进行集成测试(使用Jest和RN测试库),所有其他测试都按预期工作,但这一次,fireEvent.press()似乎停止 * 实际上 * 从按钮TouchableHighlight为特定组件触发onPress事件
工作流程:
1.人物列表
1.按导航项目以调出过滤器(缩小列表)
1.在模态2过滤器类型选项中,选择“people”过滤器
1.呈现新的过滤器列表,然后选择其中一个
1.更新人员列表并关闭模态
1.用户按下“You know it”按钮

  1. onButtonPress中的console.log()setPerson永远不会引发

按钮视图

export default function PondLeadSnippet({person, setPerson}) {
  const onButtonPress = useCallback(() => {
    console.log("========> onButtonPress");
    setPerson({...person, flagged: true});
  }, [false]);

  return (
    <View style={Style.container}>
      <View style={Style.content}>
        <Label accessibilityRole='person-name' scale='medium'>{person.name}</Label>
        <Text style={Style.detail}>{detail}</Text>
        <Text>{person.flagged ? 'Flagged' : 'Not Flagged'}</Text>
      </View>

      <TouchableHighlight testID={`flag-person-${person.uuid}`} onPress={onButtonPress}}>
        <Text>You know it</Text>
      </TouchableHighlight>
    </View>
  );
}

我的测试

test.only('can flag a person from list', async () => {
      const { getByText, getAllByRole, findByTestId, getByTestId, store } = setup();
      const bobSaget = people[1];

      // Modal to view filters -> this works!
      const filter = await findByTestId('people-filters');
      await fireEvent.press(filter);

      // toggle between 2 lists of filters -> this works!
      await waitFor(() => expect(getByTestId("people-list")).toBeTruthy());
      fireEvent.press(getByTestId("people-list"));

      // select filter -> this works!
      const peopleFilter = await findByTestId(`list-item-${someID}`);
      fireEvent.press(peopleFilter);

      // wait for list of people to update and modal closed
      await waitFor(() => expect(getAllByRole('person-name')).toHaveLength(2));
      const [ first, second ] = getAllByRole('person-name');
      expect(first.children).toContain("Bob S.")

      // press "Flag Person" button on person -> Does not work
      expect(getByTestId(`flag-person-${bobSaget.uuid}`)).toBeTruthy();
      fireEvent.press(getByTestId(`flag-person-${bobSaget.uuid}`));

      // after event rerender should happen w/ new text element w/ "Flagged"
      await waitFor(() => expect(getByText("Flagged")).toBeTruthy());
    });
zf9nrax1

zf9nrax11#

尝试激发事件时,TouchableHighlight可能尚未呈现请尝试将

expect(getByTestId(`flag-person-${bobSaget.uuid}`)).toBeTruthy();

await waitFor(() => {
     expect(getByTestId(`flag-person-${bobSaget.uuid}`)).toBeTruthy();
   })
cidc1ykv

cidc1ykv2#

使用测试库,我实现了以下功能。当使用onPress事件呈现组件时,呈现器会将其转换为onClick。根据库的逻辑,它永远不会工作。为了解决这个问题,我做了以下操作。

import {
  fireEvent,
  render
} from '@testing-library/react-native';

const element = render(
  <Presseable onPress={()=>console.log('press')}>
     <Text>I'm pressable!</Text>
  </Pressable>
);

const { getByTestId } = element;

const button= getByTestId('pressable');

fireEvent(button, 'click'); // that's how it works

fireEvent(button, 'press'); // this is the equivalent to fireEvent.press(button) It does not work like this

相关问题