How can I add the React Native Testing Library to test my package?

[yjose]

Hey Team, I hope you are doing great. Thank you for this package; it makes creating new libraries very fast.

As I want to add testing using the React Native Testing Library, I am having a difficult time getting it to work with my project setup. Could you please provide any guidance or ideas on how I can make it work?

I installed the React Native Testing Library and added the following config:

//jest.config.js
module.exports = {
  preset: 'react-native',
  setupFiles: ['./jest.setup.js'],
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|@react-native-community|@react-navigation)/)',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

// jest.setup.js
import '@testing-library/react-native/extend-expect';

but I am still having issue ReferenceError: expect is not defined while running yarn test

[satya164]

This is unrelated to bob. There's nothing different about how to setup jest.

You have an issue in your config. The setup should be done in setupFilesAfterEnv and not in setupFiles - as setupFiles runs before jest environment it ready https://callstack.github.io/react-native-testing-library/docs/start/quick-start#jest-matchers

[yjose]

Thank you, @satya164, for the quick response. I followed your advice, and it seems I did the same thing initially. However, I am encountering another error :

Trying to detect host component names triggered the following error:

    /node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js: Unexpected token, expected "]" (39:5)

      37 |
      38 | type Registry<TEventToArgsMap: {...}> = {
    > 39 |   [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
         |      ^
      40 | };
      41 |
      42 | /**

    There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
    Please check if you are using compatible versions of React Native and React Native Testing Library.

      13 |   it('should handle press events', () => {
      14 |     const onPress = jest.fn();
    > 15 |     render(<ExampleComponent onPress={onPress} />);
         |           ^
      16 |
      17 |     fireEvent.press(screen.getByText('Click me'));
      18 |     expect(onPress).toHaveBeenCalled();

I thought this might be related to the custom preset we are using with Babel.

module.exports = {
  presets: ['module:react-native-builder-bob/babel-preset'],
};

[yjose]

After a few hours of digging into the issue, it looks like using the React Native preset for testing fixed my problem.

Install @react-native/babel-preset

yarn add -D @react-native/babel-preset

Set @react-native/babel-preset as default preset for tests

// babel.config.js
module.exports = {
  presets: ['module:react-native-builder-bob/babel-preset'],
  env: {
    test: {
      presets: ['module:@react-native/babel-preset'],
    },
  },
};

@satya164 i noticed an issue while trying to run yarn run release:

ERROR The "angular" preset does not export a function. Maybe you are using an old version of the preset. Please upgrade.

The issue was related to commit lint, to fix it we need to update the commitlit deps first to the last versions.

{
  "devDependencies": {
    "@commitlint/config-conventional": "^19.5.0",
    "commitlint": "^19.6.1",
    }
}

Then update the release-it configuration you should update "preset":"angular" to use an object with name like the following:

"release-it": {
    "git": {
      "commitMessage": "chore: release ${version}",
      "tagName": "v${version}"
    },
    "npm": {
      "publish": true
    },
    "github": {
      "release": true
    },
    "plugins": {
      "@release-it/conventional-changelog": {
        "preset": {
             "name": "angular"
        },
      }
    }
  }

@satya164 please let's me know if you think i should open a PR with those updates

[satya164]

@yjose sure, feel free to open a PR. however, due tothe holiday season, the response times will be longer.