diff --git a/.all-contributorsrc b/.all-contributorsrc index 58552c8c..3ef0ecdf 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1194,6 +1194,54 @@ "contributions": [ "code" ] + }, + { + "login": "lidoravitan", + "name": "Lidor Avitan", + "avatar_url": "https://avatars0.githubusercontent.com/u/35113398?v=4", + "profile": "https://github.com/lidoravitan", + "contributions": [ + "doc" + ] + }, + { + "login": "ljharb", + "name": "Jordan Harband", + "avatar_url": "https://avatars1.githubusercontent.com/u/45469?v=4", + "profile": "https://github.com/ljharb", + "contributions": [ + "review", + "ideas" + ] + }, + { + "login": "marcosvega91", + "name": "Marco Moretti", + "avatar_url": "https://avatars2.githubusercontent.com/u/5365582?v=4", + "profile": "https://github.com/marcosvega91", + "contributions": [ + "code" + ] + }, + { + "login": "sanchit121", + "name": "sanchit121", + "avatar_url": "https://avatars2.githubusercontent.com/u/30828115?v=4", + "profile": "https://github.com/sanchit121", + "contributions": [ + "bug", + "code" + ] + }, + { + "login": "solufa", + "name": "Solufa", + "avatar_url": "https://avatars.githubusercontent.com/u/9402912?v=4", + "profile": "https://github.com/solufa", + "contributions": [ + "bug", + "code" + ] } ], "contributorsPerLine": 7, diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 01d98992..496c8563 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -23,7 +23,7 @@ Thanks for your interest in the project. We appreciate bugs filed and PRs submit instead of filing an issue on GitHub. You can follow the instructions in this codesandbox to make a reproduction of your issue: https://kcd.im/rtl-help * Discord - https://discord.gg/c6JN9fM + https://discord.gg/testing-library * Stack Overflow https://stackoverflow.com/questions/tagged/react-testing-library @@ -61,6 +61,7 @@ for the supported version. Relevant code or config ```javascript + ``` What you did: diff --git a/.github/ISSUE_TEMPLATE/Question.md b/.github/ISSUE_TEMPLATE/Question.md index d9a372d9..e625486b 100644 --- a/.github/ISSUE_TEMPLATE/Question.md +++ b/.github/ISSUE_TEMPLATE/Question.md @@ -16,7 +16,7 @@ For questions related to using the library, please visit a support community instead of filing an issue on GitHub. You can follow the instructions in this codesandbox to make a reproduction of your issue: https://kcd.im/rtl-help -- Discord https://discord.gg/c6JN9fM +- Discord https://discord.gg/testing-library - Stack Overflow https://stackoverflow.com/questions/tagged/react-testing-library - Documentation: https://github.com/testing-library/testing-library-docs diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml new file mode 100644 index 00000000..e99fa965 --- /dev/null +++ b/.github/workflows/validate.yml @@ -0,0 +1,97 @@ +name: validate +on: + push: + branches: + - '+([0-9])?(.{+([0-9]),x}).x' + - 'master' + - 'next' + - 'next-major' + - 'beta' + - 'alpha' + - '!all-contributors/**' + pull_request: {} +jobs: + main: + continue-on-error: ${{ matrix.react != 'latest' }} + # ignore all-contributors PRs + if: ${{ !contains(github.head_ref, 'all-contributors') }} + strategy: + matrix: + node: [10.13, 12, 14, 15] + react: [latest, next, experimental] + runs-on: ubuntu-latest + steps: + - name: πŸ›‘ Cancel Previous Runs + uses: styfle/cancel-workflow-action@0.6.0 + with: + access_token: ${{ secrets.GITHUB_TOKEN }} + + - name: ⬇️ Checkout repo + uses: actions/checkout@v2 + + - name: βŽ” Setup node + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node }} + + - name: πŸ“₯ Download deps + uses: bahmutov/npm-install@v1 + with: + useLockFile: false + + # as requested by the React team :) + # https://reactjs.org/blog/2019/10/22/react-release-channels.html#using-the-next-channel-for-integration-testing + - name: βš›οΈ Setup react + run: npm install react@${{ matrix.react }} react-dom@${{ matrix.react }} + + - name: ▢️ Run validate script + run: npm run validate + + - name: ⬆️ Upload coverage report + uses: codecov/codecov-action@v1 + + release: + needs: main + runs-on: ubuntu-latest + if: + ${{ github.repository == 'testing-library/react-testing-library' && + contains('refs/heads/master,refs/heads/beta,refs/heads/next,refs/heads/alpha', + github.ref) && github.event_name == 'push' }} + steps: + - name: πŸ›‘ Cancel Previous Runs + uses: styfle/cancel-workflow-action@0.6.0 + with: + access_token: ${{ secrets.GITHUB_TOKEN }} + + - name: ⬇️ Checkout repo + uses: actions/checkout@v2 + + - name: βŽ” Setup node + uses: actions/setup-node@v1 + with: + node-version: 14 + + - name: πŸ“₯ Download deps + uses: bahmutov/npm-install@v1 + with: + useLockFile: false + + - name: πŸ— Run build script + run: npm run build + + - name: πŸš€ Release + uses: cycjimmy/semantic-release-action@v2 + with: + semantic_version: 17 + branches: | + [ + '+([0-9])?(.{+([0-9]),x}).x', + 'master', + 'next', + 'next-major', + {name: 'beta', prerelease: true}, + {name: 'alpha', prerelease: true} + ] + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index eae48ee7..00000000 --- a/.travis.yml +++ /dev/null @@ -1,36 +0,0 @@ -language: node_js -cache: npm -notifications: - email: false -node_js: - # technically we support 10.0.0, but some of our tooling doesn't - - 10.14.2 - - 12 - - 14 - - node -env: - - REACT_DIST=latest - - REACT_DIST=next - - REACT_DIST=experimental -install: - - npm install - # as requested by the React team :) - # https://reactjs.org/blog/2019/10/22/react-release-channels.html#using-the-next-channel-for-integration-testing - - npm install react@$REACT_DIST react-dom@$REACT_DIST -script: - - npm run validate - - npx codecov@3 -branches: - only: - - master - - beta - -jobs: - allow_failures: - - REACT_DIST=next - - REACT_DIST=experimental - include: - - stage: release - node_js: 14 - script: kcd-scripts travis-release - if: fork = false diff --git a/README.md b/README.md index 6bccc9ac..c46eac6d 100644 --- a/README.md +++ b/README.md @@ -26,11 +26,12 @@ practices.

[![Build Status][build-badge]][build] [![Code Coverage][coverage-badge]][coverage] -[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] +[![version][version-badge]][package] +[![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] - -[![All Contributors](https://img.shields.io/badge/all_contributors-102-orange.svg?style=flat-square)](#contributors) -[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] +[![All Contributors][all-contributors-badge]](#contributors) +[![PRs Welcome][prs-badge]][prs] +[![Code of Conduct][coc-badge]][coc] [![Discord][discord-badge]][discord] [![Watch on GitHub][github-watch-badge]][github-watch] @@ -154,7 +155,7 @@ afterAll(() => { ```jsx // hidden-message.js -import React from 'react' +import * as React from 'react' // NOTE: React Testing Library works well with React Hooks and classes. // Your tests will be the same regardless of how you write your components. @@ -184,7 +185,7 @@ export default HiddenMessage import '@testing-library/jest-dom' // NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required -import React from 'react' +import * as React from 'react' import {render, fireEvent, screen} from '@testing-library/react' import HiddenMessage from '../hidden-message' @@ -209,7 +210,7 @@ test('shows the children when the checkbox is checked', () => { ```jsx // login.js -import React from 'react' +import * as React from 'react' function Login() { const [state, setState] = React.useReducer((s, a) => ({...s, ...a}), { @@ -233,7 +234,7 @@ function Login() { password: passwordInput.value, }), }) - .then(r => r.json()) + .then(r => r.json().then(data => (r.ok ? data : Promise.reject(data)))) .then( user => { setState({loading: false, resolved: true, error: null}) @@ -274,7 +275,7 @@ export default Login // again, these first two imports are something you'd normally handle in // your testing framework configuration rather than importing them in every file. import '@testing-library/jest-dom' -import React from 'react' +import * as React from 'react' // import API mocking utilities from Mock Service Worker. import {rest} from 'msw' import {setupServer} from 'msw/node' @@ -282,9 +283,10 @@ import {setupServer} from 'msw/node' import {render, fireEvent, screen} from '@testing-library/react' import Login from '../login' +const fakeUserResponse = {token: 'fake_user_token'} const server = setupServer( rest.post('/api/login', (req, res, ctx) => { - return res(ctx.json({token: 'fake_user_token'})) + return res(ctx.json(fakeUserResponse)) }), ) @@ -322,7 +324,7 @@ test('allows the user to login successfully', async () => { test('handles server exceptions', async () => { // mock the server error response for this test suite only. server.use( - rest.post('/', (req, res, ctx) => { + rest.post('/api/login', (req, res, ctx) => { return res(ctx.status(500), ctx.json({message: 'Internal server error'})) }), ) @@ -397,8 +399,8 @@ principles: `react-dom`. 3. Utility implementations and APIs should be simple and flexible. -Most importantly, we want React Testing Library to be pretty -light-weight, simple, and easy to understand. +Most importantly, we want React Testing Library to be pretty light-weight, +simple, and easy to understand. ## Docs @@ -407,8 +409,7 @@ light-weight, simple, and easy to understand. ## Issues -Looking to contribute? Look for the [Good First Issue][good-first-issue] -label. +Looking to contribute? Look for the [Good First Issue][good-first-issue] label. ### πŸ› Bugs @@ -440,169 +441,177 @@ Thanks goes to these people ([emoji key][emojis]): - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - + + +

Kent C. Dodds
πŸ’» πŸ“– πŸš‡ ⚠️
Ryan Castner
πŸ“–
Daniel Sandiego
πŸ’»
PaweΕ‚ MikoΕ‚ajczyk
πŸ’»
Alejandro ÑÑñez Ortiz
πŸ“–
Matt Parrish
πŸ› πŸ’» πŸ“– ⚠️
Justin Hall
πŸ“¦
Kent C. Dodds
πŸ’» πŸ“– πŸš‡ ⚠️
Ryan Castner
πŸ“–
Daniel Sandiego
πŸ’»
PaweΕ‚ MikoΕ‚ajczyk
πŸ’»
Alejandro ÑÑñez Ortiz
πŸ“–
Matt Parrish
πŸ› πŸ’» πŸ“– ⚠️
Justin Hall
πŸ“¦

Anto Aravinth
πŸ’» ⚠️ πŸ“–
Jonah Moses
πŸ“–
Łukasz Gandecki
πŸ’» ⚠️ πŸ“–
Ivan Babak
πŸ› πŸ€”
Jesse Day
πŸ’»
Ernesto GarcΓ­a
πŸ’¬ πŸ’» πŸ“–
Josef Maxx Blake
πŸ’» πŸ“– ⚠️

Anto Aravinth
πŸ’» ⚠️ πŸ“–
Jonah Moses
πŸ“–
Łukasz Gandecki
πŸ’» ⚠️ πŸ“–
Ivan Babak
πŸ› πŸ€”
Jesse Day
πŸ’»
Ernesto GarcΓ­a
πŸ’¬ πŸ’» πŸ“–
Josef Maxx Blake
πŸ’» πŸ“– ⚠️
Michal Baranowski
πŸ“ βœ…
Arthur Puthin
πŸ“–
Thomas Chia
πŸ’» πŸ“–
Thiago Galvani
πŸ“–
Christian
⚠️
Alex Krolick
πŸ’¬ πŸ“– πŸ’‘ πŸ€”
Johann Hubert Sonntagbauer
πŸ’» πŸ“– ⚠️

Michal Baranowski
πŸ“ βœ…
Arthur Puthin
πŸ“–
Thomas Chia
πŸ’» πŸ“–
Thiago Galvani
πŸ“–
Christian
⚠️
Alex Krolick
πŸ’¬ πŸ“– πŸ’‘ πŸ€”
Johann Hubert Sonntagbauer
πŸ’» πŸ“– ⚠️
Maddi Joyce
πŸ’»
Ryan Vice
πŸ“–
Ian Wilson
πŸ“ βœ…
Daniel
πŸ› πŸ’»
Giorgio Polvara
πŸ› πŸ€”
John Gozde
πŸ’»
Sam Horton
πŸ“– πŸ’‘ πŸ€”

Maddi Joyce
πŸ’»
Ryan Vice
πŸ“–
Ian Wilson
πŸ“ βœ…
Daniel
πŸ› πŸ’»
Giorgio Polvara
πŸ› πŸ€”
John Gozde
πŸ’»
Sam Horton
πŸ“– πŸ’‘ πŸ€”
Richard Kotze (mobile)
πŸ“–
Brahian E. Soto Mercedes
πŸ“–
Benoit de La Forest
πŸ“–
Salah
πŸ’» ⚠️
Adam Gordon
πŸ› πŸ’»
Matija Marohnić
πŸ“–
Justice Mba
πŸ“–

Richard Kotze (mobile)
πŸ“–
Brahian E. Soto Mercedes
πŸ“–
Benoit de La Forest
πŸ“–
Salah
πŸ’» ⚠️
Adam Gordon
πŸ› πŸ’»
Matija Marohnić
πŸ“–
Justice Mba
πŸ“–
Mark Pollmann
πŸ“–
Ehtesham Kafeel
πŸ’» πŸ“–
Julio PavΓ³n
πŸ’»
Duncan L
πŸ“– πŸ’‘
Tiago Almeida
πŸ“–
Robert Smith
πŸ›
Zach Green
πŸ“–

Mark Pollmann
πŸ“–
Ehtesham Kafeel
πŸ’» πŸ“–
Julio PavΓ³n
πŸ’»
Duncan L
πŸ“– πŸ’‘
Tiago Almeida
πŸ“–
Robert Smith
πŸ›
Zach Green
πŸ“–
dadamssg
πŸ“–
Yazan Aabed
πŸ“
Tim
πŸ› πŸ’» πŸ“– ⚠️
Divyanshu Maithani
βœ… πŸ“Ή
Deepak Grover
βœ… πŸ“Ή
Eyal Cohen
πŸ“–
Peter Makowski
πŸ“–

dadamssg
πŸ“–
Yazan Aabed
πŸ“
Tim
πŸ› πŸ’» πŸ“– ⚠️
Divyanshu Maithani
βœ… πŸ“Ή
Deepak Grover
βœ… πŸ“Ή
Eyal Cohen
πŸ“–
Peter Makowski
πŸ“–
Michiel Nuyts
πŸ“–
Joe Ng'ethe
πŸ’» πŸ“–
Kate
πŸ“–
Sean
πŸ“–
James Long
πŸ€” πŸ“¦
Herb Hagely
πŸ’‘
Alex Wendte
πŸ’‘

Michiel Nuyts
πŸ“–
Joe Ng'ethe
πŸ’» πŸ“–
Kate
πŸ“–
Sean
πŸ“–
James Long
πŸ€” πŸ“¦
Herb Hagely
πŸ’‘
Alex Wendte
πŸ’‘
Monica Powell
πŸ“–
Vitaly Sivkov
πŸ’»
Weyert de Boer
πŸ€” πŸ‘€ 🎨
EstebanMarin
πŸ“–
Victor Martins
πŸ“–
Royston Shufflebotham
πŸ› πŸ“– πŸ’‘
chrbala
πŸ’»

Monica Powell
πŸ“–
Vitaly Sivkov
πŸ’»
Weyert de Boer
πŸ€” πŸ‘€ 🎨
EstebanMarin
πŸ“–
Victor Martins
πŸ“–
Royston Shufflebotham
πŸ› πŸ“– πŸ’‘
chrbala
πŸ’»
Donavon West
πŸ’» πŸ“– πŸ€” ⚠️
Richard Maisano
πŸ’»
Marco Biedermann
πŸ’» 🚧 ⚠️
Alex Zherdev
πŸ› πŸ’»
AndrΓ© Matulionis dos Santos
πŸ’» πŸ’‘ ⚠️
Daniel K.
πŸ› πŸ’» πŸ€” ⚠️ πŸ‘€
mohamedmagdy17593
πŸ’»

Donavon West
πŸ’» πŸ“– πŸ€” ⚠️
Richard Maisano
πŸ’»
Marco Biedermann
πŸ’» 🚧 ⚠️
Alex Zherdev
πŸ› πŸ’»
AndrΓ© Matulionis dos Santos
πŸ’» πŸ’‘ ⚠️
Daniel K.
πŸ› πŸ’» πŸ€” ⚠️ πŸ‘€
mohamedmagdy17593
πŸ’»
Loren ☺️
πŸ“–
MarkFalconbridge
πŸ› πŸ’»
Vinicius
πŸ“– πŸ’‘
Peter Schyma
πŸ’»
Ian Schmitz
πŸ“–
Joel Marcotte
πŸ› ⚠️ πŸ’»
Alejandro Dustet
πŸ›

Loren ☺️
πŸ“–
MarkFalconbridge
πŸ› πŸ’»
Vinicius
πŸ“– πŸ’‘
Peter Schyma
πŸ’»
Ian Schmitz
πŸ“–
Joel Marcotte
πŸ› ⚠️ πŸ’»
Alejandro Dustet
πŸ›
Brandon Carroll
πŸ“–
Lucas Machado
πŸ“–
Pascal Duez
πŸ“¦
Minh Nguyen
πŸ’»
LiaoJimmy
πŸ“–
Sunil Pai
πŸ’» ⚠️
Dan Abramov
πŸ‘€

Brandon Carroll
πŸ“–
Lucas Machado
πŸ“–
Pascal Duez
πŸ“¦
Minh Nguyen
πŸ’»
LiaoJimmy
πŸ“–
Sunil Pai
πŸ’» ⚠️
Dan Abramov
πŸ‘€
Christian Murphy
πŸš‡
Ivakhnenko Dmitry
πŸ’»
James George
πŸ“–
JoΓ£o Fernandes
πŸ“–
Alejandro Perea
πŸ‘€
Nick McCurdy
πŸ‘€ πŸ’¬
Sebastian Silbermann
πŸ‘€

Christian Murphy
πŸš‡
Ivakhnenko Dmitry
πŸ’»
James George
πŸ“–
JoΓ£o Fernandes
πŸ“–
Alejandro Perea
πŸ‘€
Nick McCurdy
πŸ‘€ πŸ’¬
Sebastian Silbermann
πŸ‘€
AdriΓ  Fontcuberta
πŸ‘€ πŸ“–
John Reilly
πŸ‘€
MichaΓ«l De Boey
πŸ‘€ πŸ’»
Tim Yates
πŸ‘€
Brian Donovan
πŸ’»
Noam Gabriel Jacobson
πŸ“–
Ronald van der Kooij
⚠️ πŸ’»

AdriΓ  Fontcuberta
πŸ‘€ πŸ“–
John Reilly
πŸ‘€
MichaΓ«l De Boey
πŸ‘€ πŸ’»
Tim Yates
πŸ‘€
Brian Donovan
πŸ’»
Noam Gabriel Jacobson
πŸ“–
Ronald van der Kooij
⚠️ πŸ’»
Aayush Rajvanshi
πŸ“–
Ely Alamillo
πŸ’» ⚠️
Daniel Afonso
πŸ’» ⚠️
Laurens Bosscher
πŸ’»
Sakito Mukai
πŸ“–
TΓΌrker Teke
πŸ“–
Zach Brogan
πŸ’» ⚠️

Aayush Rajvanshi
πŸ“–
Ely Alamillo
πŸ’» ⚠️
Daniel Afonso
πŸ’» ⚠️
Laurens Bosscher
πŸ’»
Sakito Mukai
πŸ“–
TΓΌrker Teke
πŸ“–
Zach Brogan
πŸ’» ⚠️
Ryota Murakami
πŸ“–
Michael Hottman
πŸ€”
Steven Fitzpatrick
πŸ›
Juan Je GarcΓ­a
πŸ“–
Championrunner
πŸ“–
Sam Tsai
πŸ’» ⚠️ πŸ“–
Christian Rackerseder
πŸ’»

Ryota Murakami
πŸ“–
Michael Hottman
πŸ€”
Steven Fitzpatrick
πŸ›
Juan Je GarcΓ­a
πŸ“–
Championrunner
πŸ“–
Sam Tsai
πŸ’» ⚠️ πŸ“–
Christian Rackerseder
πŸ’»
Andrei Picus
πŸ› πŸ‘€
Artem Zakharchenko
πŸ“–
Michael
πŸ“–
Braden Lee
πŸ“–
Kamran Ayub
πŸ’» ⚠️
Matan Borenkraout
πŸ’»
Ryan Bigg
🚧

Andrei Picus
πŸ› πŸ‘€
Artem Zakharchenko
πŸ“–
Michael
πŸ“–
Braden Lee
πŸ“–
Kamran Ayub
πŸ’» ⚠️
Matan Borenkraout
πŸ’»
Ryan Bigg
🚧
Anton Halim
πŸ“–
Artem Malko
πŸ’»
Gerrit Alex
πŸ’»
Karthick Raja
πŸ’»
Abdelrahman Ashraf
πŸ’»
Lidor Avitan
πŸ“–
Jordan Harband
πŸ‘€ πŸ€”

Anton Halim
πŸ“–
Artem Malko
πŸ’»
Gerrit Alex
πŸ’»
Karthick Raja
πŸ’»
Abdelrahman Ashraf
πŸ’»
Marco Moretti
πŸ’»
sanchit121
πŸ› πŸ’»
Solufa
πŸ› πŸ’»
- + + This project follows the [all-contributors][all-contributors] specification. @@ -617,8 +626,8 @@ Contributions of any kind welcome! [npm]: https://www.npmjs.com/ [yarn]: https://classic.yarnpkg.com [node]: https://nodejs.org -[build-badge]: https://img.shields.io/travis/testing-library/react-testing-library.svg?style=flat-square -[build]: https://travis-ci.org/testing-library/react-testing-library +[build-badge]: https://img.shields.io/github/workflow/status/testing-library/react-testing-library/validate?logo=github&style=flat-square +[build]: https://github.com/testing-library/react-testing-library/actions?query=workflow%3Avalidate [coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/react-testing-library.svg?style=flat-square [coverage]: https://codecov.io/github/testing-library/react-testing-library [version-badge]: https://img.shields.io/npm/v/@testing-library/react.svg?style=flat-square @@ -639,12 +648,13 @@ Contributions of any kind welcome! [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/react-testing-library.svg?style=social [emojis]: https://github.com/all-contributors/all-contributors#emoji-key [all-contributors]: https://github.com/all-contributors/all-contributors +[all-contributors-badge]: https://img.shields.io/github/all-contributors/testing-library/react-testing-library?color=orange&style=flat-square [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106 [bugs]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc [requests]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen [good-first-issue]: https://github.com/testing-library/react-testing-library/issues?utf8=βœ“&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+ [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square -[discord]: https://discord.gg/c6JN9fM +[discord]: https://discord.gg/testing-library [stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library [react-hooks-testing-library]: https://github.com/testing-library/react-hooks-testing-library diff --git a/other/MAINTAINING.md b/other/MAINTAINING.md index 703126da..cade1c2a 100644 --- a/other/MAINTAINING.md +++ b/other/MAINTAINING.md @@ -32,9 +32,9 @@ any more of you than that. As a maintainer, you're fine to make your branches on the main repo or on your own fork. Either way is fine. -When we receive a pull request, a travis build is kicked off automatically (see -the `.travis.yml` for what runs in the travis build). We avoid merging anything -that breaks the travis build. +When we receive a pull request, a github action is kicked off automatically (see +the `.github/workflows/validate.yml` for what runs in the action). We avoid +merging anything that breaks the validate action. Please review PRs and focus on the code rather than the individual. You never know when this is someone's first ever PR and we want their experience to be as @@ -49,7 +49,7 @@ to release. See the next section on Releases for more about that. ## Release Our releases are automatic. They happen whenever code lands into `master`. A -travis build gets kicked off and if it's successful, a tool called +github action gets kicked off and if it's successful, a tool called [`semantic-release`](https://github.com/semantic-release/semantic-release) is used to automatically publish a new release to npm as well as a changelog to GitHub. It is only able to determine the version and whether a release is diff --git a/package.json b/package.json index 9b314d91..d1d6aa36 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "setup": "npm install && npm run validate -s", "test": "kcd-scripts test", "test:update": "npm test -- --updateSnapshot --coverage", - "typecheck": "dtslint ./types/", + "typecheck": "kcd-scripts typecheck --build types", "validate": "kcd-scripts validate" }, "files": [ @@ -43,20 +43,19 @@ "author": "Kent C. Dodds (https://kentcdodds.com)", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.11.2", - "@testing-library/dom": "^7.26.0" + "@babel/runtime": "^7.12.5", + "@testing-library/dom": "^7.28.1" }, "devDependencies": { - "@testing-library/jest-dom": "^5.11.4", - "@types/react-dom": "^16.9.8", - "dotenv-cli": "^3.2.0", - "dtslint": "4.0.0", - "kcd-scripts": "^6.3.0", + "@testing-library/jest-dom": "^5.11.6", + "@types/react-dom": "^17.0.0", + "dotenv-cli": "^4.0.0", + "kcd-scripts": "^7.5.1", "npm-run-all": "^4.1.5", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", "rimraf": "^3.0.2", - "typescript": "^4.0.2" + "typescript": "^4.1.2" }, "peerDependencies": { "react": "*", diff --git a/src/__tests__/act.js b/src/__tests__/act.js index 97438d77..b60aac37 100644 --- a/src/__tests__/act.js +++ b/src/__tests__/act.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render, fireEvent, screen} from '../' test('render calls useEffect immediately', () => { diff --git a/src/__tests__/auto-cleanup-skip.js b/src/__tests__/auto-cleanup-skip.js index e5ef35ae..5696d4e3 100644 --- a/src/__tests__/auto-cleanup-skip.js +++ b/src/__tests__/auto-cleanup-skip.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' let render beforeAll(() => { diff --git a/src/__tests__/auto-cleanup.js b/src/__tests__/auto-cleanup.js index 27debe45..450a6136 100644 --- a/src/__tests__/auto-cleanup.js +++ b/src/__tests__/auto-cleanup.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render} from '../' // This just verifies that by importing RTL in an diff --git a/src/__tests__/cleanup.js b/src/__tests__/cleanup.js index 4b67814a..6043ae06 100644 --- a/src/__tests__/cleanup.js +++ b/src/__tests__/cleanup.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render, cleanup} from '../' test('cleans up the document', () => { diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js index 14c0779a..e4e9faa0 100644 --- a/src/__tests__/debug.js +++ b/src/__tests__/debug.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render, screen} from '../' beforeEach(() => { diff --git a/src/__tests__/end-to-end.js b/src/__tests__/end-to-end.js index cbbf0973..87c70f1b 100644 --- a/src/__tests__/end-to-end.js +++ b/src/__tests__/end-to-end.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render, waitForElementToBeRemoved, screen} from '../' const fetchAMessage = () => diff --git a/src/__tests__/events.js b/src/__tests__/events.js index 0e28848f..8a6899af 100644 --- a/src/__tests__/events.js +++ b/src/__tests__/events.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render, fireEvent} from '../' const eventTypes = [ diff --git a/src/__tests__/multi-base.js b/src/__tests__/multi-base.js index 06ad0902..ef5a7e11 100644 --- a/src/__tests__/multi-base.js +++ b/src/__tests__/multi-base.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render} from '../' // these are created once per test suite and reused for each case diff --git a/src/__tests__/render.js b/src/__tests__/render.js index 4e78afa6..fdc1ff4c 100644 --- a/src/__tests__/render.js +++ b/src/__tests__/render.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import ReactDOM from 'react-dom' import {render, screen} from '../' diff --git a/src/__tests__/rerender.js b/src/__tests__/rerender.js index 7cb9156d..be3c259c 100644 --- a/src/__tests__/rerender.js +++ b/src/__tests__/rerender.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render} from '../' test('rerender will re-render the element', () => { @@ -23,9 +23,9 @@ test('hydrate will not update props until next render', () => { hydrate: true, }) - expect(initialInputElement.value).toBe(firstValue) + expect(initialInputElement).toHaveValue(firstValue) const secondValue = 'goodbye' rerender( null} />) - expect(initialInputElement.value).toBe(secondValue) + expect(initialInputElement).toHaveValue(secondValue) }) diff --git a/src/__tests__/stopwatch.js b/src/__tests__/stopwatch.js index 3fe423b1..eeaf395c 100644 --- a/src/__tests__/stopwatch.js +++ b/src/__tests__/stopwatch.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import {render, fireEvent, screen} from '../' class StopWatch extends React.Component { diff --git a/src/act-compat.js b/src/act-compat.js index e999ecfe..40ecdab9 100644 --- a/src/act-compat.js +++ b/src/act-compat.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import ReactDOM from 'react-dom' import * as testUtils from 'react-dom/test-utils' diff --git a/src/pure.js b/src/pure.js index 8a062038..75098f78 100644 --- a/src/pure.js +++ b/src/pure.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import ReactDOM from 'react-dom' import { getQueriesForElement, diff --git a/types/index.d.ts b/types/index.d.ts index 50702ecc..6d0c67ee 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,30 +1,41 @@ // TypeScript Version: 3.8 -import {OptionsReceived as PrettyFormatOptions} from 'pretty-format' -import {queries, Queries, BoundFunction} from '@testing-library/dom' +import { + queries, + Queries, + BoundFunction, + prettyFormat, +} from '@testing-library/dom' +import {Renderer} from 'react-dom' import {act as reactAct} from 'react-dom/test-utils' export * from '@testing-library/dom' -export type RenderResult = { - container: HTMLElement - baseElement: HTMLElement +export type RenderResult< + Q extends Queries = typeof queries, + Container extends Element | DocumentFragment = HTMLElement +> = { + container: Container + baseElement: Element debug: ( baseElement?: - | HTMLElement + | Element | DocumentFragment - | Array, + | Array, maxLength?: number, - options?: PrettyFormatOptions, + options?: prettyFormat.OptionsReceived, ) => void rerender: (ui: React.ReactElement) => void - unmount: () => boolean + unmount: () => void asFragment: () => DocumentFragment } & {[P in keyof Q]: BoundFunction} -export interface RenderOptions { - container?: HTMLElement - baseElement?: HTMLElement +export interface RenderOptions< + Q extends Queries = typeof queries, + Container extends Element | DocumentFragment = HTMLElement +> { + container?: Container + baseElement?: Element hydrate?: boolean queries?: Q wrapper?: React.ComponentType @@ -35,14 +46,17 @@ type Omit = Pick> /** * Render into a container which is appended to document.body. It should be used with cleanup. */ +export function render< + Q extends Queries = typeof queries, + Container extends Element | DocumentFragment = HTMLElement +>( + ui: React.ReactElement, + options: RenderOptions, +): RenderResult export function render( ui: React.ReactElement, options?: Omit, ): RenderResult -export function render( - ui: React.ReactElement, - options: RenderOptions, -): RenderResult /** * Unmounts React trees that were mounted with render. diff --git a/types/test.tsx b/types/test.tsx index c273feb0..01105c06 100644 --- a/types/test.tsx +++ b/types/test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' -import {render, fireEvent, screen, waitFor} from '@testing-library/react' -import * as pure from '@testing-library/react/pure' +import {render, fireEvent, screen, waitFor} from '.' +import * as pure from './pure' -async function testRender() { - const page = render(
) +export async function testRender() { + const page = render(