Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate to @testing-library/react-native #77

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Migrate to @testing-library/react-native #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions template/__tests__/App.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@
*/

import React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import { render } from "@testing-library/react-native";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { render } from "@testing-library/react-native";
import { render, screen } from "@testing-library/react-native";

import App from '../App';

test('renders correctly', async () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test does not contain async code, so we can safely remove async keyword

Suggested change
test('renders correctly', async () => {
test('renders correctly', () => {

await ReactTestRenderer.act(() => {
ReactTestRenderer.create(<App />);
});
render(<App />);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
render(<App />);
render(<App />);
expect(screen.getByText('Read the docs to discover what to do next')).toBeOnTheScreen();

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All Jest test should contain some expect assertions. A typical one is that a certain element is rendered on the screen. I've picked a sample text from App.tsx here.

});
1 change: 1 addition & 0 deletions template/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
module.exports = {
preset: 'react-native',
setupFilesAfterEnv: ["@testing-library/react-native/extend-expect"],
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather recommend creating jest-setup.ts file and putting the import "@testing-library/react-native/extend-expect" there. With typical RN app users quickly find need to add additional global mocks for popular community libraries.

};
2 changes: 1 addition & 1 deletion template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@
"@react-native/eslint-config": "0.77.0-main",
"@react-native/metro-config": "0.77.0-main",
"@react-native/typescript-config": "0.77.0-main",
"@testing-library/react-native": "^12.8.1",
"@types/jest": "^29.5.13",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "19.0.0-rc-fb9a90fa48-20240614",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should not remove react-test-renderer as it's required by RNTL. If this works, then only through package manager automatically installing react-test-renderer as a peer dep for RNTL. The risk here is that it will pick the wrong version of the package, and react and react-test-renderer versions need to match.

"typescript": "5.0.4"
},
"engines": {
Expand Down