feat: Support for @testing-library/jest-native (#310)

* Added @testing-library/jest-native to devDependencies * Tests for jest-native matchers * Added @testing-library/jest-native install info * Update README.md * Update GettingStarted.md * feat: add `findBy*` queries (#304) * Basic async findBy queries * Refactored findBy queries to be built with makeFindQuery * findBy queries for A11y selectors * Custom findByTestId implementation that avoids current getByTestId issues * Fixed prettier issue * Updates Queries.md with findBy queries * Trying to fix test timeout error appearing only on CI * Code review changes * Added typescript types & tests * prettier did reformat some code arround * Removed export of GetByAPI, QueryByAPI and FindByAPI interfaces in TS * Reversed prettier run on typings * Added overlapping pieces with `within` operator * Small cleanup * Update website/docs/Queries.md * Moved async/await tests to the end of test methods Co-authored-by: Michał Pierzchała <thymikee@gmail.com> * chore: bump eslint config to latest (#308) * chore: bump eslint config to latest * lint fix * lint pass * use roles directly * Trying to fix CI build * Added $FlowFixMe for missing flow expect extensions * Small doc fixes * Clarified failing toHaveProps matcher tests * Moved lint ignore for color literals to .eslintrc * Updated toHaveProp tests to avoid strange `Button` behavior * Updated yarn.lock * Update README.md * Update website/docs/GettingStarted.md Co-authored-by: Michał Pierzchała <thymikee@gmail.com>
2026-09-18 23:09:04 +08:00 · 2020-05-18 09:37:59 +02:00
parent c482f6ad07
commit 414f8701a5
6 changed files with 202 additions and 2 deletions
@@ -0,0 +1,90 @@
+// @flow
+import React from 'react';
+import { StyleSheet, View, Button, Text, TextInput } from 'react-native';
+import { render } from '..';
+import '@testing-library/jest-native/extend-expect';
+
+const style = StyleSheet.create({
+  style1: {
+    color: 'red',
+    backgroundColor: 'green',
+  },
+});
+
+test('jest-native matchers work correctly', () => {
+  const { getByText, getByA11yHint } = render(
+    <View>
+      <Button title="Enabled Button" onPress={jest.fn()} />
+      <Button title="Disabled Button" disabled={true} onPress={jest.fn()} />
+      <Text accessibilityHint="Empty Text" style={style.style1} />
+      <Text accessibilityHint="Not Empty Text">Not empty</Text>
+      <View accessibilityHint="Empty View" />
+      <View accessibilityHint="Not Empty View">
+        <Text />
+      </View>
+      <View accessibilityHint="Container View">
+        <View accessibilityHint="First-Level Child">
+          <Text>Second-Level Child</Text>
+        </View>
+      </View>
+      <TextInput
+        accessibilityHint="Text Input"
+        allowFontScaling={false}
+        secureTextEntry={true}
+        defaultValue="111"
+      />
+    </View>
+  );
+
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByText('Enabled Button')).toBeEnabled();
+
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByText('Disabled Button')).not.toBeEnabled();
+
+  expect(getByText('Disabled Button')).toBeDisabled();
+  expect(getByText('Enabled Button')).not.toBeDisabled();
+
+  expect(getByA11yHint('Empty Text')).toBeEmpty();
+  expect(getByA11yHint('Empty View')).toBeEmpty();
+  expect(getByA11yHint('Not Empty Text')).not.toBeEmpty();
+  expect(getByA11yHint('Not Empty View')).not.toBeEmpty();
+
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Container View')).toContainElement(
+    getByA11yHint('First-Level Child')
+  );
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Container View')).toContainElement(
+    getByText('Second-Level Child')
+  );
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Container View')).not.toContainElement(
+    getByText('Enabled Button')
+  );
+
+  expect(getByA11yHint('Not Empty Text')).toHaveTextContent('Not empty');
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Not Empty Text')).toHaveTextContent(/Not empty/);
+  expect(getByA11yHint('Not Empty Text')).not.toHaveTextContent('Is empty');
+
+  expect(getByA11yHint('Empty Text')).toHaveStyle({ color: 'red' });
+  expect(getByA11yHint('Empty Text')).toHaveStyle({
+    color: 'red',
+    backgroundColor: 'green',
+  });
+  expect(getByA11yHint('Empty Text')).not.toHaveStyle({ color: 'green' });
+  expect(getByA11yHint('Empty Text')).not.toHaveStyle({
+    color: 'green',
+    backgroundColor: 'green',
+  });
+
+  const textInput = getByA11yHint('Text Input');
+  expect(textInput).toBeTruthy();
+  expect(textInput).toHaveProp('allowFontScaling');
+  expect(textInput).toHaveProp('allowFontScaling', false);
+  expect(textInput).toHaveProp('secureTextEntry');
+  expect(textInput).toHaveProp('secureTextEntry', true);
+  expect(textInput).toHaveProp('defaultValue');
+  expect(textInput).toHaveProp('defaultValue', '111');
+});