如何使用toBeVisible匹配器与React本机

Question

我将react-native-testing-library与"@testing-library/jest-dom/extend-expect"结合使用。

看起来toBeVisible只适用于ReactJS：

const nameField = component.getByPlaceholder("Name");
expect(nameField).toBeVisible();

// Test Error:
● NewCustomerScreen › the basics › encountered a declaration exception

    expect(received).toBeVisible()

    received value must be an HTMLElement or an SVGElement.
    Received has type:  object
    Received has value: {"_fiber": {"_debugHookTypes": null, "_debugID": 26, "_debugIsCurrentlyTiming": false, "_debugOwner": [FiberNode], "_debugSource": null, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "contextDependencies": null, "effectTag": 133, "elementType": [Function Component], "expirationTime": 0, "firstEffect": null, "index": 1, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 0, "nextEffect": [FiberNode], "pendingProps": [Object], "ref": [Function ref], "return": [FiberNode], "sibling": null, "stateNode": [Component], "tag": 1, "type": [Function Component], "updateQueue": null}}

有办法让它起作用吗？

Answer 1

你可以用这个

这里，您可以看到与此相关的解释。

import { render } from 'react-native-testing-library';
...
const { getByPlaceholder } = render(
  <View>
    <TextInput placeholder="Name"  />
  </View>
);
..
expect(getByPlaceholder("Name")).toBeVisible();

toBeVisible示例

<View>
  <View testID="not-empty">
    <Text testID="empty" />
  </View>
  <Text testID="visible">Visible Example</Text>
</View>;

expect(queryByTestId(baseElement, 'not-empty')).not.toBeEmpty();
expect(getByText(baseElement, 'Visible Example')).toBeVisible();