feat(native): Add toBeVisible #145
Conversation
| } from "react-native"; | ||
|
|
||
| import { ElementAssertion } from "../../src/lib/ElementAssertion"; | ||
|
|
||
| const SimpleToggleText: React.FC = () => { |
There was a problem hiding this comment.
We should avoid using the React.FC type, as its function return type is too broad. A named function is usually a better choice, as it also gets hoisted 😬
| const SimpleToggleText: React.FC = () => { | |
| function SimpleToggleText(): ReactElement { |
| const [isVisible, setIsVisible] = useState(true); | ||
|
|
||
| const handleToggle = useCallback((): void => { | ||
| setIsVisible((prev: boolean) => !prev); |
There was a problem hiding this comment.
Nit: It's ok to let TS infer the type of callback arguments 🙂
| setIsVisible((prev: boolean) => !prev); | |
| setIsVisible(prev => !prev); |
| return ( | ||
| <View> | ||
| <Text | ||
| testID="textElement" |
There was a problem hiding this comment.
Using the testId should be our last resort to query elements. For instance, this element can be found using a getByText("Toggle me!") query.
| {"Toggle me!"} | ||
| </Text> | ||
| <Button | ||
| testID="toggleButton" |
There was a problem hiding this comment.
Same on this one. The byRole query is preferred in most cases, and for this element, we should be able to do getByRole("button", { name: "Toggle Text" }) instead.
| const element = render( | ||
| <Modal testID="id" visible={true} />, | ||
| ); |
There was a problem hiding this comment.
Nit: Destructuring can help make the queries simpler 🙂
| const element = render( | |
| <Modal testID="id" visible={true} />, | |
| ); | |
| const { getByTestId } = render( | |
| <Modal testID="id" visible={true} />, | |
| ); |
kdquistanchala
force-pushed
the
feat/native-to-be-visible
branch
from
35e5052 to
82fa78b
Compare
This PR adds the
toBeVisiblematcher for React Native