1

I am running a test for a component that needs to check if it has a particular CSS style. As the React Native Testing Library doesn't have this function by default, I installed the @testing-library/react-native to use toHaveStyle from there but while running a test I get an error: Test suite failed to run. Cannot find module '@testing-library/jest-native' from "a path to my test file here". Here is my test and the jest config:

// test file
import React from 'react';
import {toHaveStyle} from '@testing-library/jest-native';

describe('JobForm', () => {
  expect.extend({toHaveStyle});
  // ....
});


// package.json
{
//...
   "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js",
            "jsx",
            "json",
            "node"
        ],
        "transformIgnorePatterns": [
            "node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|aws-amplify-react-native|@ui-kitten)"
        ],
        "setupFiles": [
            "<rootDir>/jest.setup.js",
            "./node_modules/react-native-gesture-handler/jestSetup.js"
        ]
    }
}

//jest.setup.js
import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';

jest.mock('@react-native-community/netinfo', () => mockRNCNetInfo);
jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
dnd1993
  • 101
  • 2
  • 11

2 Answers2

0

It seems that you forgot to finish the configuration from the Usage section (a section below the Installation section) from the @testing-library/jest-native package. All you need to do is add this line to your setup file:

import '@testing-library/jest-native/extend-expect';
Ilê Caian
  • 480
  • 1
  • 7
  • Hey, thanks a lot for your answer. The section you sent me a link to also mentiones the second approach: Alternatively, you can selectively import only the matchers you intend to use, and extend jest's expect yourself: import { toBeEmptyElement, toHaveTextContent } from '@testing-library/jest-native'; expect.extend({ toBeEmptyElement, toHaveTextContent }); And this one I did use and I am still getting the error – dnd1993 Oct 31 '22 at 16:47
  • I also tried importing this statement to the test file and I am still getting an error =/ – dnd1993 Oct 31 '22 at 16:48
  • Also, I am not sure which setup file? – dnd1993 Oct 31 '22 at 16:49
  • Your setup file is the one described inside your `package.json` file, at `jest.setupFiles`. From what I saw, it is the `jest.setup.js` file. Just try adding the line I mentioned and check if works. If it doesn't, could you please provide a message of error (editing your answer maybe)? – Ilê Caian Oct 31 '22 at 16:57
  • 1
    Also, ideally, you should keep those things (even importing just the used matchers) inside the setup file and import them from there. I also think it worth asking but: have you run `npm install --save-dev @testing-library/jest-native`? – Ilê Caian Oct 31 '22 at 16:59
  • If I add this import statement to the jest.setup.js and run npm test, all of my tests fail (ReferenceError: expect is not defined). And yes, I did run npm install --save-dev @testing-library/jest-native – dnd1993 Oct 31 '22 at 17:05
  • Remember to use **just one of the options**: the `import` or the `extend` option. If you use the second one, remember to follow the informed import from the INFO box at [`jest` doc](https://jestjs.io/docs/expect) (and you can see [mentioned here at the TypeScript tab](https://jestjs.io/docs/expect#expectextendmatchers)): `import { expect } from '@jest/globals';` – Ilê Caian Oct 31 '22 at 17:14
0

In case of config or import issues it's always a good idea to compare you config against model one provided by RNTL team. RNTL has a basic example app that is useful for that purpose, especially that it also includes @testing-library/jest-native.

Maciej Jastrzebski
  • 3,674
  • 3
  • 22
  • 28