Refactor: use testing library on unit tests

jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   preset: 'react-native',
+  setupFilesAfterEnv: ['./jest.setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   modulePathIgnorePatterns: ['<rootDir>/lib/'],
   testMatch: ['**/?(*.)+(test).js'],

jest.setup.js

@@ -0,0 +1,3 @@
+import { toHaveStyle } from '@testing-library/jest-native';
+
+expect.extend({ toHaveStyle });

package.json

@@ -63,6 +63,7 @@
     "@react-native-community/eslint-plugin": "^1.1.0",
     "@release-it/conventional-changelog": "^1.1.4",
     "@testing-library/jest-native": "^3.1.0",
+    "@testing-library/react-native": "^7.2.0",
     "@types/highlight-words-core": "^1.2.0",
     "@types/jest": "^25.2.3",
     "@types/react-native": "^0.62.12",

src/__tests__/__snapshots__/index.test.js.snap

@@ -1,15 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<HighlightText /> should render properly 1`] = `
+exports[`<HighlightText /> should detect all ocurrencies of searched words in textToHighlight prop 1`] = `
 <Text>
-  In this text we can do a 
+  I'm 
   <Text>
-    hello
+    Slim
   </Text>
-   to the entire 
+
   <Text>
-    world
+    Shady
+  </Text>
+  , yes, I'm the real 
+  <Text>
+    Shady
+  </Text>
+  . All you other 
+  <Text>
+    Slim
+  </Text>
+
+  <Text>
+    Shady
+  </Text>
+  s, are just imitating. So won't the real 
+  <Text>
+    Slim
+  </Text>
+
+  <Text>
+    Shady
   </Text>
+  , please stand up?
 </Text>
 `;
 
@@ -74,3 +95,16 @@ exports[`<HighlightText /> should render properly with custom styles 1`] = `
   </Text>
 </Text>
 `;
+
+exports[`<HighlightText /> should wrap each matched search word with an isolated element 1`] = `
+<Text>
+  In this text we can do a 
+  <Text>
+    hello
+  </Text>
+   to the entire 
+  <Text>
+    world
+  </Text>
+</Text>
+`;

src/__tests__/index.test.js

@@ -1,30 +1,53 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { create } from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import HighlightText from '../';
 
 describe('<HighlightText />', () => {
-  it('should render properly', () => {
-    const wrapper = create(
-      <HighlightText
-        searchWords={['hello', 'world']}
-        textToHighlight={'In this text we can do a hello to the entire world'}
-      />
-    );
-    expect(wrapper.toJSON()).toMatchSnapshot();
+  it('should wrap each matched search word with an isolated element', () => {
+    const props = {
+      searchWords: ['hello', 'world'],
+      textToHighlight: 'In this text we can do a hello to the entire world',
+    };
+    const { queryByText, toJSON } = render(<HighlightText {...props} />);
+
+    for (const word of props.searchWords) {
+      expect(queryByText(word)).toBeTruthy();
+    }
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should detect all ocurrencies of searched words in textToHighlight prop', () => {
+    const props = {
+      searchWords: ['Slim', 'Shady'],
+      textToHighlight:
+        "I'm Slim Shady, yes, I'm the real Shady. All you other Slim Shadys, are just imitating. So won't the real Slim Shady, please stand up?",
+    };
+    const { getAllByText, toJSON } = render(<HighlightText {...props} />);
+
+    expect(getAllByText('Slim')).toHaveLength(3);
+    expect(getAllByText('Shady')).toHaveLength(4);
+
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render properly with custom styles', () => {
-    const wrapper = create(
-      <HighlightText
-        searchWords={['hello', 'world']}
-        textToHighlight={'In this text we can do a hello to the entire world'}
-        style={{ color: 'darkgray' }}
-        highlightStyle={{ color: 'blue' }}
-      />
-    );
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    const props = {
+      searchWords: ['hello', 'world'],
+      textToHighlight: 'In this text we can do a hello to the entire world',
+      style: { color: 'darkgray' },
+      highlightStyle: { color: 'blue' },
+    };
+
+    const { queryByText, toJSON } = render(<HighlightText {...props} />);
+
+    for (const word of props.searchWords) {
+      expect(queryByText(word)).toHaveStyle(props.highlightStyle);
+    }
+
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render properly with custom components', () => {
@@ -34,14 +57,14 @@ describe('<HighlightText />', () => {
     const CustomHighlight = (props) => (
       <Text style={{ fontWeight: 'bold' }}>{props.children}</Text>
     );
-    const wrapper = create(
+    const { toJSON } = render(
       <HighlightText
         searchWords={['hello', 'world']}
         textToHighlight={'In this text we can do a hello to the entire world'}
         textComponent={CustomText}
         highlightComponent={CustomHighlight}
       />
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

yarn.lock

@@ -2004,6 +2004,13 @@
     ramda "^0.26.1"
     redent "^2.0.0"
 
+"@testing-library/react-native@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-7.2.0.tgz#e5ec5b0974e4e5f525f8057563417d1e9f820d96"
+  integrity sha512-rDKzJjAAeGgyoJT0gFQiMsIL09chdWcwZyYx6WZHMgm2c5NDqY52hUuyTkzhqddMYWmSRklFphSg7B2HX+246Q==
+  dependencies:
+    pretty-format "^26.0.1"
+
 "@types/babel__core@^7.1.7":
   version "7.1.8"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.8.tgz#057f725aca3641f49fc11c7a87a9de5ec588a5d7"