Using custom matcher result in error from @testing-library/jest-native

[sanjeevyadavIT]

Versions

software	version
react	16.11.0
react-native	0.62.1
react-native-testing-library	2.0.0
react-test-renderer	16.11.0
@testing-library/jest-native	3.1.0

Description

I followed the docs to add @testing-library/jest-native to use custom matchers. I added the dependency, created a jest.config.js file, pasted code as mentioned in docs, and try to use custom matchers, it result in error

Describe the bug

When trying to use toBeDisabled matcher, getting error

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/sanjeev/ReactNativeProjects/xyz/node_modules/react-native/index.js:13
    import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
           ^^^^^^

    SyntaxError: Unexpected token typeof

      1 | import React, { useContext } from 'react';
    > 2 | import { View, StyleSheet, ViewPropTypes } from 'react-native';

Reproducible Demo

1. Add @testing-library/jest-native package

yarn add --dev @testing-library/jest-native

2. Create a jest.config.js file and paste following code in it

module.exports = {
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
};

3. Use custom matchers from @testing-library/jest-native/extend-expect

MyButton.js

const MyButton = ({ disabled, onPress }) => (
    <TouchableOpacity onPress={onPress} accessible accessibilityRole="button" disabled={disabled}>
         <Text>{title}</Text>
    </TouchableOpacity>
);

MyButton.test.js

import React from 'react';
import { render } from 'react-native-testing-library';
import MyButton from './MyButton';

test('loading state is handled', () => {
    // Setup
    const buttonTitle = 'Press me';
    const { getByA11yRole } = render(
      <Button disabled title={buttonTitle} />,
    );

    // Exercise
    const container = getByA11yRole('button');

    // Verify
    expect(container).toBeDisabled();
  })

[thymikee]

Can you hare your babel config and what the filename looks like? Ideally we'd appreciate a repository with minimal reproduction example we could download

[sanjeevyadavIT]

Hi, this is my babel.config.js, I'm working on production code, I will create a dummy repo, and report the link 🙂

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

[thymikee]

Oh, you're missing "preset": "react-native" from your Jest config!

[sanjeevyadavIT]

Could you point out where I have to write "preset": "react-native",in which file I have to write this, I tried writing this in babel.config.js & jest.config.js both are resulting in new error

or perhaps you can point to a repo, which uses react-native-testing-library with @testing-library/jest-native so I can look all the configuration file