commit 35ff36dcd7503759971aecaec879795a961eb08e Author: Kent C. Dodds Date: Mon Mar 19 07:40:35 2018 -0600 feat: initial release fork testing-library/react diff --git a/.all-contributorsrc b/.all-contributorsrc new file mode 100644 index 0000000..bbf012f --- /dev/null +++ b/.all-contributorsrc @@ -0,0 +1,995 @@ +{ + "projectName": "react-testing-library", + "projectOwner": "testing-library", + "repoType": "github", + "files": [ + "README.md" + ], + "imageSize": 100, + "commit": false, + "contributors": [ + { + "login": "kentcdodds", + "name": "Kent C. Dodds", + "avatar_url": "https://avatars.githubusercontent.com/u/1500684?v=3", + "profile": "https://kentcdodds.com", + "contributions": [ + "code", + "doc", + "infra", + "test" + ] + }, + { + "login": "audiolion", + "name": "Ryan Castner", + "avatar_url": "https://avatars1.githubusercontent.com/u/2430381?v=4", + "profile": "http://audiolion.github.io", + "contributions": [ + "doc" + ] + }, + { + "login": "dnlsandiego", + "name": "Daniel Sandiego", + "avatar_url": "https://avatars0.githubusercontent.com/u/8008023?v=4", + "profile": "https://www.dnlsandiego.com", + "contributions": [ + "code" + ] + }, + { + "login": "Miklet", + "name": "Paweł Mikołajczyk", + "avatar_url": "https://avatars2.githubusercontent.com/u/12592677?v=4", + "profile": "https://github.com/Miklet", + "contributions": [ + "code" + ] + }, + { + "login": "alejandronanez", + "name": "Alejandro Ñáñez Ortiz", + "avatar_url": "https://avatars3.githubusercontent.com/u/464978?v=4", + "profile": "http://co.linkedin.com/in/alejandronanez/", + "contributions": [ + "doc" + ] + }, + { + "login": "pbomb", + "name": "Matt Parrish", + "avatar_url": "https://avatars0.githubusercontent.com/u/1402095?v=4", + "profile": "https://github.com/pbomb", + "contributions": [ + "bug", + "code", + "doc", + "test" + ] + }, + { + "login": "wKovacs64", + "name": "Justin Hall", + "avatar_url": "https://avatars1.githubusercontent.com/u/1288694?v=4", + "profile": "https://github.com/wKovacs64", + "contributions": [ + "platform" + ] + }, + { + "login": "antoaravinth", + "name": "Anto Aravinth", + "avatar_url": "https://avatars1.githubusercontent.com/u/1241511?s=460&v=4", + "profile": "https://github.com/antoaravinth", + "contributions": [ + "code", + "test", + "doc" + ] + }, + { + "login": "JonahMoses", + "name": "Jonah Moses", + "avatar_url": "https://avatars2.githubusercontent.com/u/3462296?v=4", + "profile": "https://github.com/JonahMoses", + "contributions": [ + "doc" + ] + }, + { + "login": "lgandecki", + "name": "Łukasz Gandecki", + "avatar_url": "https://avatars1.githubusercontent.com/u/4002543?v=4", + "profile": "http://team.thebrain.pro", + "contributions": [ + "code", + "test", + "doc" + ] + }, + { + "login": "sompylasar", + "name": "Ivan Babak", + "avatar_url": "https://avatars2.githubusercontent.com/u/498274?v=4", + "profile": "https://sompylasar.github.io", + "contributions": [ + "bug", + "ideas" + ] + }, + { + "login": "jday3", + "name": "Jesse Day", + "avatar_url": "https://avatars3.githubusercontent.com/u/4439618?v=4", + "profile": "https://github.com/jday3", + "contributions": [ + "code" + ] + }, + { + "login": "gnapse", + "name": "Ernesto García", + "avatar_url": "https://avatars0.githubusercontent.com/u/15199?v=4", + "profile": "http://gnapse.github.io", + "contributions": [ + "question", + "code", + "doc" + ] + }, + { + "login": "jomaxx", + "name": "Josef Maxx Blake", + "avatar_url": "https://avatars2.githubusercontent.com/u/2747424?v=4", + "profile": "http://jomaxx.com", + "contributions": [ + "code", + "doc", + "test" + ] + }, + { + "login": "mbaranovski", + "name": "Michal Baranowski", + "avatar_url": "https://avatars1.githubusercontent.com/u/29602306?v=4", + "profile": "https://twitter.com/baranovskim", + "contributions": [ + "blog", + "tutorial" + ] + }, + { + "login": "aputhin", + "name": "Arthur Puthin", + "avatar_url": "https://avatars3.githubusercontent.com/u/13985684?v=4", + "profile": "https://github.com/aputhin", + "contributions": [ + "doc" + ] + }, + { + "login": "thchia", + "name": "Thomas Chia", + "avatar_url": "https://avatars2.githubusercontent.com/u/21194045?v=4", + "profile": "https://github.com/thchia", + "contributions": [ + "code", + "doc" + ] + }, + { + "login": "thiagopaiva99", + "name": "Thiago Galvani", + "avatar_url": "https://avatars3.githubusercontent.com/u/20430611?v=4", + "profile": "http://ilegra.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "ChrisWcs", + "name": "Christian", + "avatar_url": "https://avatars1.githubusercontent.com/u/19828824?v=4", + "profile": "http://Chriswcs.github.io", + "contributions": [ + "test" + ] + }, + { + "login": "alexkrolick", + "name": "Alex Krolick", + "avatar_url": "https://avatars3.githubusercontent.com/u/1571667?v=4", + "profile": "https://alexkrolick.com", + "contributions": [ + "question", + "doc", + "example", + "ideas" + ] + }, + { + "login": "johann-sonntagbauer", + "name": "Johann Hubert Sonntagbauer", + "avatar_url": "https://avatars3.githubusercontent.com/u/1239401?v=4", + "profile": "https://github.com/johann-sonntagbauer", + "contributions": [ + "code", + "doc", + "test" + ] + }, + { + "login": "maddijoyce", + "name": "Maddi Joyce", + "avatar_url": "https://avatars2.githubusercontent.com/u/2224291?v=4", + "profile": "http://www.maddijoyce.com", + "contributions": [ + "code" + ] + }, + { + "login": "RyanAtViceSoftware", + "name": "Ryan Vice", + "avatar_url": "https://avatars2.githubusercontent.com/u/10080111?v=4", + "profile": "http://www.vicesoftware.com", + "contributions": [ + "doc" + ] + }, + { + "login": "iwilsonq", + "name": "Ian Wilson", + "avatar_url": "https://avatars1.githubusercontent.com/u/7942604?v=4", + "profile": "https://ianwilson.io", + "contributions": [ + "blog", + "tutorial" + ] + }, + { + "login": "InExtremaRes", + "name": "Daniel", + "avatar_url": "https://avatars2.githubusercontent.com/u/1635491?v=4", + "profile": "https://github.com/InExtremaRes", + "contributions": [ + "bug", + "code" + ] + }, + { + "login": "Gpx", + "name": "Giorgio Polvara", + "avatar_url": "https://avatars0.githubusercontent.com/u/767959?v=4", + "profile": "https://twitter.com/Gpx", + "contributions": [ + "bug", + "ideas" + ] + }, + { + "login": "jgoz", + "name": "John Gozde", + "avatar_url": "https://avatars2.githubusercontent.com/u/132233?v=4", + "profile": "https://github.com/jgoz", + "contributions": [ + "code" + ] + }, + { + "login": "SavePointSam", + "name": "Sam Horton", + "avatar_url": "https://avatars0.githubusercontent.com/u/8203211?v=4", + "profile": "https://twitter.com/SavePointSam", + "contributions": [ + "doc", + "example", + "ideas" + ] + }, + { + "login": "rkotze", + "name": "Richard Kotze (mobile)", + "avatar_url": "https://avatars2.githubusercontent.com/u/10452163?v=4", + "profile": "http://www.richardkotze.com", + "contributions": [ + "doc" + ] + }, + { + "login": "sotobuild", + "name": "Brahian E. Soto Mercedes", + "avatar_url": "https://avatars2.githubusercontent.com/u/10819833?v=4", + "profile": "https://github.com/sotobuild", + "contributions": [ + "doc" + ] + }, + { + "login": "bdelaforest", + "name": "Benoit de La Forest", + "avatar_url": "https://avatars2.githubusercontent.com/u/7151559?v=4", + "profile": "https://github.com/bdelaforest", + "contributions": [ + "doc" + ] + }, + { + "login": "thesalah", + "name": "Salah", + "avatar_url": "https://avatars3.githubusercontent.com/u/6624197?v=4", + "profile": "https://github.com/thesalah", + "contributions": [ + "code", + "test" + ] + }, + { + "login": "icfantv", + "name": "Adam Gordon", + "avatar_url": "https://avatars2.githubusercontent.com/u/370054?v=4", + "profile": "http://gordonizer.com", + "contributions": [ + "bug", + "code" + ] + }, + { + "login": "silvenon", + "name": "Matija Marohnić", + "avatar_url": "https://avatars2.githubusercontent.com/u/471278?v=4", + "profile": "https://silvenon.com", + "contributions": [ + "doc" + ] + }, + { + "login": "Dajust", + "name": "Justice Mba", + "avatar_url": "https://avatars3.githubusercontent.com/u/8015514?v=4", + "profile": "https://github.com/Dajust", + "contributions": [ + "doc" + ] + }, + { + "login": "MarkPollmann", + "name": "Mark Pollmann", + "avatar_url": "https://avatars2.githubusercontent.com/u/5286559?v=4", + "profile": "https://markpollmann.com/", + "contributions": [ + "doc" + ] + }, + { + "login": "ehteshamkafeel", + "name": "Ehtesham Kafeel", + "avatar_url": "https://avatars1.githubusercontent.com/u/1213123?v=4", + "profile": "https://github.com/ehteshamkafeel", + "contributions": [ + "code", + "doc" + ] + }, + { + "login": "jpavon", + "name": "Julio Pavón", + "avatar_url": "https://avatars2.githubusercontent.com/u/1493505?v=4", + "profile": "http://jpavon.com", + "contributions": [ + "code" + ] + }, + { + "login": "duncanleung", + "name": "Duncan L", + "avatar_url": "https://avatars3.githubusercontent.com/u/1765048?v=4", + "profile": "http://www.duncanleung.com/", + "contributions": [ + "doc", + "example" + ] + }, + { + "login": "tyagow", + "name": "Tiago Almeida", + "avatar_url": "https://avatars1.githubusercontent.com/u/700778?v=4", + "profile": "https://www.linkedin.com/in/tyagow/?locale=en_US", + "contributions": [ + "doc" + ] + }, + { + "login": "rbrtsmith", + "name": "Robert Smith", + "avatar_url": "https://avatars2.githubusercontent.com/u/4982001?v=4", + "profile": "http://rbrtsmith.com/", + "contributions": [ + "bug" + ] + }, + { + "login": "zgreen", + "name": "Zach Green", + "avatar_url": "https://avatars0.githubusercontent.com/u/1700355?v=4", + "profile": "https://offbyone.tech", + "contributions": [ + "doc" + ] + }, + { + "login": "dadamssg", + "name": "dadamssg", + "avatar_url": "https://avatars3.githubusercontent.com/u/881986?v=4", + "profile": "https://github.com/dadamssg", + "contributions": [ + "doc" + ] + }, + { + "login": "YazanAabeed", + "name": "Yazan Aabed", + "avatar_url": "https://avatars0.githubusercontent.com/u/8734097?v=4", + "profile": "https://www.yaabed.com/", + "contributions": [ + "blog" + ] + }, + { + "login": "timbonicus", + "name": "Tim", + "avatar_url": "https://avatars0.githubusercontent.com/u/556258?v=4", + "profile": "https://github.com/timbonicus", + "contributions": [ + "bug", + "code", + "doc", + "test" + ] + }, + { + "login": "divyanshu013", + "name": "Divyanshu Maithani", + "avatar_url": "https://avatars3.githubusercontent.com/u/6682655?v=4", + "profile": "http://divyanshu.xyz", + "contributions": [ + "tutorial", + "video" + ] + }, + { + "login": "metagrover", + "name": "Deepak Grover", + "avatar_url": "https://avatars2.githubusercontent.com/u/9116042?v=4", + "profile": "https://www.linkedin.com/in/metagrover", + "contributions": [ + "tutorial", + "video" + ] + }, + { + "login": "eyalcohen4", + "name": "Eyal Cohen", + "avatar_url": "https://avatars0.githubusercontent.com/u/16276358?v=4", + "profile": "https://github.com/eyalcohen4", + "contributions": [ + "doc" + ] + }, + { + "login": "petermakowski", + "name": "Peter Makowski", + "avatar_url": "https://avatars3.githubusercontent.com/u/7452681?v=4", + "profile": "https://github.com/petermakowski", + "contributions": [ + "doc" + ] + }, + { + "login": "Michielnuyts", + "name": "Michiel Nuyts", + "avatar_url": "https://avatars2.githubusercontent.com/u/20361668?v=4", + "profile": "https://github.com/Michielnuyts", + "contributions": [ + "doc" + ] + }, + { + "login": "joeynimu", + "name": "Joe Ng'ethe", + "avatar_url": "https://avatars0.githubusercontent.com/u/1195863?v=4", + "profile": "https://github.com/joeynimu", + "contributions": [ + "code", + "doc" + ] + }, + { + "login": "Enikol", + "name": "Kate", + "avatar_url": "https://avatars3.githubusercontent.com/u/19998290?v=4", + "profile": "https://github.com/Enikol", + "contributions": [ + "doc" + ] + }, + { + "login": "SeanRParker", + "name": "Sean", + "avatar_url": "https://avatars1.githubusercontent.com/u/11980217?v=4", + "profile": "http://www.seanrparker.com", + "contributions": [ + "doc" + ] + }, + { + "login": "jlongster", + "name": "James Long", + "avatar_url": "https://avatars2.githubusercontent.com/u/17031?v=4", + "profile": "http://jlongster.com", + "contributions": [ + "ideas", + "platform" + ] + }, + { + "login": "hhagely", + "name": "Herb Hagely", + "avatar_url": "https://avatars1.githubusercontent.com/u/10118777?v=4", + "profile": "https://github.com/hhagely", + "contributions": [ + "example" + ] + }, + { + "login": "themostcolm", + "name": "Alex Wendte", + "avatar_url": "https://avatars2.githubusercontent.com/u/5779538?v=4", + "profile": "http://www.wendtedesigns.com/", + "contributions": [ + "example" + ] + }, + { + "login": "M0nica", + "name": "Monica Powell", + "avatar_url": "https://avatars0.githubusercontent.com/u/6998954?v=4", + "profile": "http://www.aboutmonica.com", + "contributions": [ + "doc" + ] + }, + { + "login": "sivkoff", + "name": "Vitaly Sivkov", + "avatar_url": "https://avatars1.githubusercontent.com/u/2699953?v=4", + "profile": "http://sivkoff.com", + "contributions": [ + "code" + ] + }, + { + "login": "weyert", + "name": "Weyert de Boer", + "avatar_url": "https://avatars3.githubusercontent.com/u/7049?v=4", + "profile": "https://github.com/weyert", + "contributions": [ + "ideas", + "review" + ] + }, + { + "login": "EstebanMarin", + "name": "EstebanMarin", + "avatar_url": "https://avatars3.githubusercontent.com/u/13613037?v=4", + "profile": "https://github.com/EstebanMarin", + "contributions": [ + "doc" + ] + }, + { + "login": "vctormb", + "name": "Victor Martins", + "avatar_url": "https://avatars2.githubusercontent.com/u/13953703?v=4", + "profile": "https://github.com/vctormb", + "contributions": [ + "doc" + ] + }, + { + "login": "RoystonS", + "name": "Royston Shufflebotham", + "avatar_url": "https://avatars0.githubusercontent.com/u/19773?v=4", + "profile": "https://github.com/RoystonS", + "contributions": [ + "bug", + "doc", + "example" + ] + }, + { + "login": "chrbala", + "name": "chrbala", + "avatar_url": "https://avatars0.githubusercontent.com/u/6834804?v=4", + "profile": "https://github.com/chrbala", + "contributions": [ + "code" + ] + }, + { + "login": "donavon", + "name": "Donavon West", + "avatar_url": "https://avatars3.githubusercontent.com/u/887639?v=4", + "profile": "http://donavon.com", + "contributions": [ + "code", + "doc", + "ideas", + "test" + ] + }, + { + "login": "maisano", + "name": "Richard Maisano", + "avatar_url": "https://avatars2.githubusercontent.com/u/689081?v=4", + "profile": "https://github.com/maisano", + "contributions": [ + "code" + ] + }, + { + "login": "marcobiedermann", + "name": "Marco Biedermann", + "avatar_url": "https://avatars0.githubusercontent.com/u/5244986?v=4", + "profile": "https://www.marcobiedermann.com", + "contributions": [ + "code", + "maintenance", + "test" + ] + }, + { + "login": "alexzherdev", + "name": "Alex Zherdev", + "avatar_url": "https://avatars3.githubusercontent.com/u/93752?v=4", + "profile": "https://github.com/alexzherdev", + "contributions": [ + "bug", + "code" + ] + }, + { + "login": "Andrewmat", + "name": "André Matulionis dos Santos", + "avatar_url": "https://avatars0.githubusercontent.com/u/5133846?v=4", + "profile": "https://twitter.com/Andrewmat", + "contributions": [ + "code", + "example", + "test" + ] + }, + { + "login": "FredyC", + "name": "Daniel K.", + "avatar_url": "https://avatars0.githubusercontent.com/u/1096340?v=4", + "profile": "https://github.com/FredyC", + "contributions": [ + "bug", + "code", + "ideas", + "test", + "review" + ] + }, + { + "login": "mohamedmagdy17593", + "name": "mohamedmagdy17593", + "avatar_url": "https://avatars0.githubusercontent.com/u/40938625?v=4", + "profile": "https://github.com/mohamedmagdy17593", + "contributions": [ + "code" + ] + }, + { + "login": "lorensr", + "name": "Loren ☺️", + "avatar_url": "https://avatars2.githubusercontent.com/u/251288?v=4", + "profile": "http://lorensr.me", + "contributions": [ + "doc" + ] + }, + { + "login": "MarkFalconbridge", + "name": "MarkFalconbridge", + "avatar_url": "https://avatars1.githubusercontent.com/u/20678943?v=4", + "profile": "https://github.com/MarkFalconbridge", + "contributions": [ + "bug", + "code" + ] + }, + { + "login": "viniciusavieira", + "name": "Vinicius", + "avatar_url": "https://avatars0.githubusercontent.com/u/2073019?v=4", + "profile": "https://github.com/viniciusavieira", + "contributions": [ + "doc", + "example" + ] + }, + { + "login": "pschyma", + "name": "Peter Schyma", + "avatar_url": "https://avatars2.githubusercontent.com/u/2489928?v=4", + "profile": "https://github.com/pschyma", + "contributions": [ + "code" + ] + }, + { + "login": "ianschmitz", + "name": "Ian Schmitz", + "avatar_url": "https://avatars1.githubusercontent.com/u/6355370?v=4", + "profile": "https://github.com/ianschmitz", + "contributions": [ + "doc" + ] + }, + { + "login": "joual", + "name": "Joel Marcotte", + "avatar_url": "https://avatars0.githubusercontent.com/u/157877?v=4", + "profile": "https://github.com/joual", + "contributions": [ + "bug", + "test", + "code" + ] + }, + { + "login": "aledustet", + "name": "Alejandro Dustet", + "avatar_url": "https://avatars3.githubusercontent.com/u/2413802?v=4", + "profile": "http://aledustet.com", + "contributions": [ + "bug" + ] + }, + { + "login": "bcarroll22", + "name": "Brandon Carroll", + "avatar_url": "https://avatars2.githubusercontent.com/u/11020406?v=4", + "profile": "https://github.com/bcarroll22", + "contributions": [ + "doc" + ] + }, + { + "login": "lucas0707", + "name": "Lucas Machado", + "avatar_url": "https://avatars1.githubusercontent.com/u/26284338?v=4", + "profile": "https://github.com/lucas0707", + "contributions": [ + "doc" + ] + }, + { + "login": "pascalduez", + "name": "Pascal Duez", + "avatar_url": "https://avatars3.githubusercontent.com/u/335467?v=4", + "profile": "http://pascalduez.me", + "contributions": [ + "platform" + ] + }, + { + "login": "NMinhNguyen", + "name": "Minh Nguyen", + "avatar_url": "https://avatars3.githubusercontent.com/u/2852660?v=4", + "profile": "https://twitter.com/minh_ngvyen", + "contributions": [ + "code" + ] + }, + { + "login": "LiaoJimmy", + "name": "LiaoJimmy", + "avatar_url": "https://avatars0.githubusercontent.com/u/11155585?v=4", + "profile": "http://iababy46.blogspot.tw/", + "contributions": [ + "doc" + ] + }, + { + "login": "threepointone", + "name": "Sunil Pai", + "avatar_url": "https://avatars2.githubusercontent.com/u/18808?v=4", + "profile": "https://github.com/threepointone", + "contributions": [ + "code", + "test" + ] + }, + { + "login": "gaearon", + "name": "Dan Abramov", + "avatar_url": "https://avatars0.githubusercontent.com/u/810438?v=4", + "profile": "http://twitter.com/dan_abramov", + "contributions": [ + "review" + ] + }, + { + "login": "ChristianMurphy", + "name": "Christian Murphy", + "avatar_url": "https://avatars3.githubusercontent.com/u/3107513?v=4", + "profile": "https://github.com/ChristianMurphy", + "contributions": [ + "infra" + ] + }, + { + "login": "jeetiss", + "name": "Ivakhnenko Dmitry", + "avatar_url": "https://avatars1.githubusercontent.com/u/6726016?v=4", + "profile": "https://jeetiss.github.io/", + "contributions": [ + "code" + ] + }, + { + "login": "jamesgeorge007", + "name": "James George", + "avatar_url": "https://avatars2.githubusercontent.com/u/25279263?v=4", + "profile": "https://ghuser.io/jamesgeorge007", + "contributions": [ + "doc" + ] + }, + { + "login": "JSFernandes", + "name": "João Fernandes", + "avatar_url": "https://avatars1.githubusercontent.com/u/1075053?v=4", + "profile": "https://joaofernandes.me/", + "contributions": [ + "doc" + ] + }, + { + "login": "alejandroperea", + "name": "Alejandro Perea", + "avatar_url": "https://avatars3.githubusercontent.com/u/6084749?v=4", + "profile": "https://github.com/alejandroperea", + "contributions": [ + "review" + ] + }, + { + "login": "nickmccurdy", + "name": "Nick McCurdy", + "avatar_url": "https://avatars0.githubusercontent.com/u/927220?v=4", + "profile": "https://nickmccurdy.com/", + "contributions": [ + "review", + "question" + ] + }, + { + "login": "eps1lon", + "name": "Sebastian Silbermann", + "avatar_url": "https://avatars3.githubusercontent.com/u/12292047?v=4", + "profile": "https://twitter.com/sebsilbermann", + "contributions": [ + "review" + ] + }, + { + "login": "afontcu", + "name": "Adrià Fontcuberta", + "avatar_url": "https://avatars0.githubusercontent.com/u/9197791?v=4", + "profile": "https://afontcu.dev", + "contributions": [ + "review", + "doc" + ] + }, + { + "login": "johnnyreilly", + "name": "John Reilly", + "avatar_url": "https://avatars0.githubusercontent.com/u/1010525?v=4", + "profile": "https://blog.johnnyreilly.com/", + "contributions": [ + "review" + ] + }, + { + "login": "MichaelDeBoey", + "name": "Michaël De Boey", + "avatar_url": "https://avatars3.githubusercontent.com/u/6643991?v=4", + "profile": "https://michaeldeboey.be", + "contributions": [ + "review" + ] + }, + { + "login": "cimbul", + "name": "Tim Yates", + "avatar_url": "https://avatars2.githubusercontent.com/u/927923?v=4", + "profile": "https://cimbul.com", + "contributions": [ + "review" + ] + }, + { + "login": "eventualbuddha", + "name": "Brian Donovan", + "avatar_url": "https://avatars3.githubusercontent.com/u/1938?v=4", + "profile": "https://github.com/eventualbuddha", + "contributions": [ + "code" + ] + }, + { + "login": "JaysQubeXon", + "name": "Noam Gabriel Jacobson", + "avatar_url": "https://avatars1.githubusercontent.com/u/18309230?v=4", + "profile": "https://github.com/JaysQubeXon", + "contributions": [ + "doc" + ] + }, + { + "login": "rvdkooy", + "name": "Ronald van der Kooij", + "avatar_url": "https://avatars1.githubusercontent.com/u/4119960?v=4", + "profile": "https://github.com/rvdkooy", + "contributions": [ + "test", + "code" + ] + }, + { + "login": "aayushrajvanshi", + "name": "Aayush Rajvanshi", + "avatar_url": "https://avatars0.githubusercontent.com/u/14968551?v=4", + "profile": "https://github.com/aayushrajvanshi", + "contributions": [ + "doc" + ] + }, + { + "login": "ely-alamillo", + "name": "Ely Alamillo", + "avatar_url": "https://avatars2.githubusercontent.com/u/24350492?v=4", + "profile": "https://elyalamillo.com", + "contributions": [ + "code", + "test" + ] + }, + { + "login": "danieljcafonso", + "name": "Daniel Afonso", + "avatar_url": "https://avatars3.githubusercontent.com/u/35337607?v=4", + "profile": "https://github.com/danieljcafonso", + "contributions": [ + "code", + "test" + ] + }, + { + "login": "LaurensBosscher", + "name": "Laurens Bosscher", + "avatar_url": "https://avatars0.githubusercontent.com/u/13363196?v=4", + "profile": "http://www.laurensbosscher.nl", + "contributions": [ + "code" + ] + } + ], + "contributorsPerLine": 7, + "repoHost": "https://github.com" +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..391f0a4 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +* text=auto +*.js text eol=lf diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..b43b347 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,82 @@ + + +- `react-testing-library` version: +- `react` version: +- `node` version: +- `npm` (or `yarn`) version: + +Relevant code or config + +```javascript +``` + +What you did: + +What happened: + + + +Reproduction repository: + + + +Problem description: + + + +Suggested solution: + + diff --git a/.github/ISSUE_TEMPLATE/Bug_Report.md b/.github/ISSUE_TEMPLATE/Bug_Report.md new file mode 100644 index 0000000..dea2dde --- /dev/null +++ b/.github/ISSUE_TEMPLATE/Bug_Report.md @@ -0,0 +1,70 @@ +--- +name: 🐛 Bug Report +about: Bugs, missing documentation, or unexpected behavior 🤔. +--- + + + +- `react-testing-library` version: +- `react` version: +- `node` version: +- `npm` (or `yarn`) version: + +### Relevant code or config: + +```js +var your => (code) => here; +``` + + + +### What you did: + + + +### What happened: + + + +### Reproduction: + + + +### Problem description: + + + +### Suggested solution: + + diff --git a/.github/ISSUE_TEMPLATE/Feature_Request.md b/.github/ISSUE_TEMPLATE/Feature_Request.md new file mode 100644 index 0000000..357d1df --- /dev/null +++ b/.github/ISSUE_TEMPLATE/Feature_Request.md @@ -0,0 +1,51 @@ +--- +name: 💡 Feature Request +about: I have a suggestion (and might want to implement myself 🙂)! +--- + + + +### Describe the feature you'd like: + + + +### Suggested implementation: + + + +### Describe alternatives you've considered: + + + +### Teachability, Documentation, Adoption, Migration Strategy: + + diff --git a/.github/ISSUE_TEMPLATE/Question.md b/.github/ISSUE_TEMPLATE/Question.md new file mode 100644 index 0000000..efd0d84 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/Question.md @@ -0,0 +1,21 @@ +--- +name: ❓ Support Question +about: 🛑 If you have a question 💬, please check out our support channels! +--- + +-------------- 👆 Click "Preview"! + +Issues on GitHub are intended to be related to problems with the library itself +and feature requests so we recommend not using this medium to ask them here 😁. + +--- + +## ❓ Support Forums + +- React Spectrum https://spectrum.chat/react-testing-library +- Reactiflux on Discord https://www.reactiflux.com +- Stack Overflow + https://stackoverflow.com/questions/tagged/react-testing-library +- Documentation: https://github.com/alexkrolick/testing-library-docs + +**ISSUES WHICH ARE QUESTIONS WILL BE CLOSED** diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..e3b54b3 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,44 @@ + + + + +**What**: + + + +**Why**: + + + +**How**: + + + +**Checklist**: + + + + + +- [ ] Documentation added to the + [docs site](https://github.com/alexkrolick/testing-library-docs) +- [ ] Tests +- [ ] Typescript definitions updated +- [ ] Ready to be merged + + + diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5bb9fac --- /dev/null +++ b/.gitignore @@ -0,0 +1,15 @@ +node_modules +coverage +dist +.opt-in +.opt-out +.DS_Store +.eslintcache + +yarn-error.log + +# these cause more harm than good +# when working with contributors +package-lock.json +yarn.lock + diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..d272289 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +registry=http://registry.npmjs.org/ +package-lock=false diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..30117ea --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +package.json +node_modules +dist +coverage diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..f368519 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": false, + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": false, + "jsxBracketSameLine": false, + "proseWrap": "always" +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..66796ac --- /dev/null +++ b/.travis.yml @@ -0,0 +1,20 @@ +sudo: false +language: node_js +cache: + directories: + - ~/.npm +notifications: + email: false +node_js: + - '8' + - '10' + - '12' +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 + - if [ "$TRAVIS_EVENT_TYPE" = "cron" ]; then npm install react@next react-dom@next; fi +script: npm run validate +after_success: kcd-scripts travis-after-success +branches: + only: master diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..2a67529 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# CHANGELOG + +The changelog is automatically updated using +[semantic-release](https://github.com/semantic-release/semantic-release). You +can see it on the [releases page](../../releases). diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..070cb5f --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,75 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of +experience, nationality, personal appearance, race, religion, or sexual identity +and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, or to ban temporarily or permanently any +contributor for other behaviors that they deem inappropriate, threatening, +offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at kent+coc@doddsfamily.us. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an +incident. Further details of specific enforcement policies may be posted +separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 1.4, available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..de766c7 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,50 @@ +# Contributing + +Thanks for being willing to contribute! + +**Working on your first Pull Request?** You can learn how from this _free_ +series [How to Contribute to an Open Source Project on GitHub][egghead] + +## Project setup + +1. Fork and clone the repo +2. Run `npm run setup -s` to install dependencies and run validation +3. Create a branch for your PR with `git checkout -b pr/your-branch-name` + +> Tip: Keep your `master` branch pointing at the original repository and make +> pull requests from branches on your fork. To do this, run: +> +> ``` +> git remote add upstream https://github.com/testing-library/react-testing-library.git +> git fetch upstream +> git branch --set-upstream-to=upstream/master master +> ``` +> +> This will add the original repository as a "remote" called "upstream," Then +> fetch the git information from that remote, then set your local `master` +> branch to use the upstream master branch whenever you run `git pull`. Then you +> can make all of your pull request branches based on this `master` branch. +> Whenever you want to update your version of `master`, do a regular `git pull`. + +## Committing and Pushing changes + +Please make sure to run the tests before you commit your changes. You can run +`npm run test:update` which will update any snapshots that need updating. Make +sure to include those changes (if they exist) in your commit. + +### Update Typings + +The TypeScript type definitions are in the +[DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__react) + +## Help needed + +Please checkout the [the open issues][issues] + +Also, please watch the repo and respond to questions/bug reports/feature +requests! Thanks! + +[egghead]: + https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github +[all-contributors]: https://github.com/all-contributors/all-contributors +[issues]: https://github.com/testing-library/react-testing-library/issues diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..4c43675 --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) +Copyright (c) 2017 Kent C. Dodds + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..f309091 --- /dev/null +++ b/README.md @@ -0,0 +1,567 @@ +
+

React Testing Library

+ + + goat + + +

Simple and complete React DOM testing utilities that encourage good testing +practices.

+ +
+ +[**Read The Docs**](https://testing-library.com/react) | +[Edit the docs](https://github.com/testing-library/testing-library-docs) + +
+
+ +
+ + +[![Build Status][build-badge]][build] +[![Code Coverage][coverage-badge]][coverage] +[![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] +[![Join the community on Spectrum][spectrum-badge]][spectrum] + +[![Watch on GitHub][github-watch-badge]][github-watch] +[![Star on GitHub][github-star-badge]][github-star] +[![Tweet][twitter-badge]][twitter] + + +
+ + TestingJavaScript.com Learn the smart, efficient way to test any JavaScript application. + +
+ +## Table of Contents + + + + +- [The problem](#the-problem) +- [This solution](#this-solution) +- [Installation](#installation) + - [Suppressing unnecessary warnings on React DOM 16.8](#suppressing-unnecessary-warnings-on-react-dom-168) +- [Examples](#examples) + - [Basic Example](#basic-example) + - [Complex Example](#complex-example) + - [More Examples](#more-examples) +- [Hooks](#hooks) +- [Guiding Principles](#guiding-principles) +- [Docs](#docs) +- [Issues](#issues) + - [🐛 Bugs](#-bugs) + - [💡 Feature Requests](#-feature-requests) + - [❓ Questions](#-questions) +- [Contributors](#contributors) +- [LICENSE](#license) + + + +## The problem + +You want to write maintainable tests for your React components. As a part of +this goal, you want your tests to avoid including implementation details of your +components and rather focus on making your tests give you the confidence for +which they are intended. As part of this, you want your testbase to be +maintainable in the long run so refactors of your components (changes to +implementation but not functionality) don't break your tests and slow you and +your team down. + +## This solution + +The `React Testing Library` is a very lightweight solution for testing React +components. It provides light utility functions on top of `react-dom` and +`react-dom/test-utils`, in a way that encourages better testing practices. Its +primary guiding principle is: + +> [The more your tests resemble the way your software is used, the more +> confidence they can give you.][guiding-principle] + +## Installation + +This module is distributed via [npm][npm] which is bundled with [node][node] and +should be installed as one of your project's `devDependencies`: + +``` +npm install --save-dev @testing-library/react +``` + +This library has `peerDependencies` listings for `react` and `react-dom`. + +You may also be interested in installing `@testing-library/jest-dom` so you can +use [the custom jest matchers](https://github.com/testing-library/jest-dom). + +> [**Docs**](https://testing-library.com/react) + +### Suppressing unnecessary warnings on React DOM 16.8 + +There is a known compatibility issue with React DOM 16.8 where you will see the +following warning: + +``` +Warning: An update to ComponentName inside a test was not wrapped in act(...). +``` + +If you cannot upgrade to React DOM 16.9, you may suppress the warnings by adding +the following snippet to your test configuration +([learn more](https://github.com/testing-library/react-testing-library/issues/281)): + +```js +// this is just a little hack to silence a warning that we'll get until we +// upgrade to 16.9: https://github.com/facebook/react/pull/14853 +const originalError = console.error +beforeAll(() => { + console.error = (...args) => { + if (/Warning.*not wrapped in act/.test(args[0])) { + return + } + originalError.call(console, ...args) + } +}) + +afterAll(() => { + console.error = originalError +}) +``` + +## Examples + +### Basic Example + +```jsx +// hidden-message.js +import React from 'react' + +// NOTE: React Testing Library works with React Hooks _and_ classes just as well +// and your tests will be the same however you write your components. +function HiddenMessage({children}) { + const [showMessage, setShowMessage] = React.useState(false) + return ( +
+ + setShowMessage(e.target.checked)} + checked={showMessage} + /> + {showMessage ? children : null} +
+ ) +} + +export default HiddenMessage + +// __tests__/hidden-message.js +// these imports are something you'd normally configure Jest to import for you +// automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanup +import '@testing-library/jest-dom/extend-expect' +// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required + +import React from 'react' +import {render, fireEvent} from '@testing-library/react' +import HiddenMessage from '../hidden-message' + +test('shows the children when the checkbox is checked', () => { + const testMessage = 'Test Message' + const {queryByText, getByLabelText, getByText} = render( + {testMessage}, + ) + + // query* functions will return the element or null if it cannot be found + // get* functions will return the element or throw an error if it cannot be found + expect(queryByText(testMessage)).toBeNull() + + // the queries can accept a regex to make your selectors more resilient to content tweaks and changes. + fireEvent.click(getByLabelText(/show/i)) + + // .toBeInTheDocument() is an assertion that comes from jest-dom + // otherwise you could use .toBeDefined() + expect(getByText(testMessage)).toBeInTheDocument() +}) +``` + +### Complex Example + +```jsx +// login.js +import React from 'react' + +function Login() { + const [state, setState] = React.useReducer((s, a) => ({...s, ...a}), { + resolved: false, + loading: false, + error: null, + }) + + function handleSubmit(event) { + event.preventDefault() + const {usernameInput, passwordInput} = event.target.elements + + setState({loading: true, resolved: false, error: null}) + + window + .fetch('/api/login', { + method: 'POST', + headers: {'Content-Type': 'application/json'}, + body: JSON.stringify({ + username: usernameInput.value, + password: passwordInput.value, + }), + }) + .then(r => r.json()) + .then( + user => { + setState({loading: false, resolved: true, error: null}) + window.localStorage.setItem('token', user.token) + }, + error => { + setState({loading: false, resolved: false, error: error.message}) + }, + ) + } + + return ( +
+
+
+ + +
+
+ + +
+ +
+ {state.error ?
{state.error.message}
: null} + {state.resolved ? ( +
Congrats! You're signed in!
+ ) : null} +
+ ) +} + +export default Login + +// __tests__/login.js +// 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/extend-expect' +import React from 'react' +import {render, fireEvent} from '@testing-library/react' +import Login from '../login' + +test('allows the user to login successfully', async () => { + // mock out window.fetch for the test + const fakeUserResponse = {token: 'fake_user_token'} + jest.spyOn(window, 'fetch').mockImplementationOnce(() => { + return Promise.resolve({ + json: () => Promise.resolve(fakeUserResponse), + }) + }) + + const {getByLabelText, getByText, findByRole} = render() + + // fill out the form + fireEvent.change(getByLabelText(/username/i), {target: {value: 'chuck'}}) + fireEvent.change(getByLabelText(/password/i), {target: {value: 'norris'}}) + + fireEvent.click(getByText(/submit/i)) + + // just like a manual tester, we'll instruct our test to wait for the alert + // to show up before continuing with our assertions. + const alert = await findByRole('alert') + + // .toHaveTextContent() comes from jest-dom's assertions + // otherwise you could use expect(alert.textContent).toMatch(/congrats/i) + // but jest-dom will give you better error messages which is why it's recommended + expect(alert).toHaveTextContent(/congrats/i) + expect(window.localStorage.getItem('token')).toEqual(fakeUserResponse.token) +}) +``` + +### More Examples + +> We're in the process of moving examples to the +> [docs site](https://testing-library.com/docs/example-codesandbox) + +You'll find runnable examples of testing with different libraries in +[the `react-testing-library-examples` codesandbox](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples). +Some included are: + +- [`react-redux`](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/?fontsize=14&module=%2Fsrc%2F__tests__%2Freact-redux.js&previewwindow=tests) +- [`react-router`](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/?fontsize=14&module=%2Fsrc%2F__tests__%2Freact-router.js&previewwindow=tests) +- [`react-context`](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/?fontsize=14&module=%2Fsrc%2F__tests__%2Freact-context.js&previewwindow=tests) + +You can also find React Testing Library examples at +[react-testing-examples.com](https://react-testing-examples.com/jest-rtl/). + +## Hooks + +If you are interested in testing a custom hook, check out [React Hooks Testing +Library][react-hooks-testing-library]. + +> NOTE it is not recommended to test single-use custom hooks in isolation from +> the components where it's being used. It's better to test the component that's +> using the hook rather than the hook itself. The `React Hooks Testing Library` +> is intended to be used for reusable hooks/libraries. + +## Guiding Principles + +> [The more your tests resemble the way your software is used, the more +> confidence they can give you.][guiding-principle] + +We try to only expose methods and utilities that encourage you to write tests +that closely resemble how your react components are used. + +Utilities are included in this project based on the following guiding +principles: + +1. If it relates to rendering components, it deals with DOM nodes rather than + component instances, nor should it encourage dealing with component + instances. +2. It should be generally useful for testing individual React components or + full React applications. While this library is focused on `react-dom`, + utilities could be included even if they don't directly relate to + `react-dom`. +3. Utility implementations and APIs should be simple and flexible. + +At the end of the day, what we want is for this library to be pretty +light-weight, simple, and understandable. + +## Docs + +[**Read The Docs**](https://testing-library.com/react) | +[Edit the docs](https://github.com/testing-library/testing-library-docs) + +## Issues + +_Looking to contribute? Look for the [Good First Issue][good-first-issue] +label._ + +### 🐛 Bugs + +Please file an issue for bugs, missing documentation, or unexpected behavior. + +[**See Bugs**][bugs] + +### 💡 Feature Requests + +Please file an issue to suggest new features. Vote on feature requests by adding +a 👍. This helps maintainers prioritize what to work on. + +[**See Feature Requests**][requests] + +### ❓ Questions + +For questions related to using the library, please visit a support community +instead of filing an issue on GitHub. + +- [Spectrum][spectrum] +- [Reactiflux on Discord][reactiflux] +- [Stack Overflow][stackoverflow] + +## Contributors + +Thanks goes to these people ([emoji key][emojis]): + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Kent C. Dodds
Kent C. Dodds
💻 📖 🚇 ⚠️		Ryan Castner
Ryan Castner
📖		Daniel Sandiego
Daniel Sandiego
💻		Paweł Mikołajczyk
Paweł Mikołajczyk
💻		Alejandro Ñáñez Ortiz
Alejandro Ñáñez Ortiz
📖		Matt Parrish
Matt Parrish
🐛 💻 📖 ⚠️		Justin Hall
Justin Hall
📦
Anto Aravinth
Anto Aravinth
💻 ⚠️ 📖		Jonah Moses
Jonah Moses
📖		Łukasz Gandecki
Łukasz Gandecki
💻 ⚠️ 📖		Ivan Babak
Ivan Babak
🐛 🤔		Jesse Day
Jesse Day
💻		Ernesto García
Ernesto García
💬 💻 📖		Josef Maxx Blake
Josef Maxx Blake
💻 📖 ⚠️
Michal Baranowski
Michal Baranowski
📝 ✅		Arthur Puthin
Arthur Puthin
📖		Thomas Chia
Thomas Chia
💻 📖		Thiago Galvani
Thiago Galvani
📖		Christian
Christian
⚠️		Alex Krolick
Alex Krolick
💬 📖 💡 🤔		Johann Hubert Sonntagbauer
Johann Hubert Sonntagbauer
💻 📖 ⚠️
Maddi Joyce
Maddi Joyce
💻		Ryan Vice
Ryan Vice
📖		Ian Wilson
Ian Wilson
📝 ✅		Daniel
Daniel
🐛 💻		Giorgio Polvara
Giorgio Polvara
🐛 🤔		John Gozde
John Gozde
💻		Sam Horton
Sam Horton
📖 💡 🤔
Richard Kotze (mobile)
Richard Kotze (mobile)
📖		Brahian E. Soto Mercedes
Brahian E. Soto Mercedes
📖		Benoit de La Forest
Benoit de La Forest
📖		Salah
Salah
💻 ⚠️		Adam Gordon
Adam Gordon
🐛 💻		Matija Marohnić
Matija Marohnić
📖		Justice Mba
Justice Mba
📖
Mark Pollmann
Mark Pollmann
📖		Ehtesham Kafeel
Ehtesham Kafeel
💻 📖		Julio Pavón
Julio Pavón
💻		Duncan L
Duncan L
📖 💡		Tiago Almeida
Tiago Almeida
📖		Robert Smith
Robert Smith
🐛		Zach Green
Zach Green
📖
dadamssg
dadamssg
📖		Yazan Aabed
Yazan Aabed
📝		Tim
Tim
🐛 💻 📖 ⚠️		Divyanshu Maithani
Divyanshu Maithani
✅ 📹		Deepak Grover
Deepak Grover
✅ 📹		Eyal Cohen
Eyal Cohen
📖		Peter Makowski
Peter Makowski
📖
Michiel Nuyts
Michiel Nuyts
📖		Joe Ng'ethe
Joe Ng'ethe
💻 📖		Kate
Kate
📖		Sean
Sean
📖		James Long
James Long
🤔 📦		Herb Hagely
Herb Hagely
💡		Alex Wendte
Alex Wendte
💡
Monica Powell
Monica Powell
📖		Vitaly Sivkov
Vitaly Sivkov
💻		Weyert de Boer
Weyert de Boer
🤔 👀		EstebanMarin
EstebanMarin
📖		Victor Martins
Victor Martins
📖		Royston Shufflebotham
Royston Shufflebotham
🐛 📖 💡		chrbala
chrbala
💻
Donavon West
Donavon West
💻 📖 🤔 ⚠️		Richard Maisano
Richard Maisano
💻		Marco Biedermann
Marco Biedermann
💻 🚧 ⚠️		Alex Zherdev
Alex Zherdev
🐛 💻		André Matulionis dos Santos
André Matulionis dos Santos
💻 💡 ⚠️		Daniel K.
Daniel K.
🐛 💻 🤔 ⚠️ 👀		mohamedmagdy17593
mohamedmagdy17593
💻
Loren ☺️
Loren ☺️
📖		MarkFalconbridge
MarkFalconbridge
🐛 💻		Vinicius
Vinicius
📖 💡		Peter Schyma
Peter Schyma
💻		Ian Schmitz
Ian Schmitz
📖		Joel Marcotte
Joel Marcotte
🐛 ⚠️ 💻		Alejandro Dustet
Alejandro Dustet
🐛
Brandon Carroll
Brandon Carroll
📖		Lucas Machado
Lucas Machado
📖		Pascal Duez
Pascal Duez
📦		Minh Nguyen
Minh Nguyen
💻		LiaoJimmy
LiaoJimmy
📖		Sunil Pai
Sunil Pai
💻 ⚠️		Dan Abramov
Dan Abramov
👀
Christian Murphy
Christian Murphy
🚇		Ivakhnenko Dmitry
Ivakhnenko Dmitry
💻		James George
James George
📖		João Fernandes
João Fernandes
📖		Alejandro Perea
Alejandro Perea
👀		Nick McCurdy
Nick McCurdy
👀 💬		Sebastian Silbermann
Sebastian Silbermann
👀
Adrià Fontcuberta
Adrià Fontcuberta
👀 📖		John Reilly
John Reilly
👀		Michaël De Boey
Michaël De Boey
👀		Tim Yates
Tim Yates
👀		Brian Donovan
Brian Donovan
💻		Noam Gabriel Jacobson
Noam Gabriel Jacobson
📖		Ronald van der Kooij
Ronald van der Kooij
⚠️ 💻
Aayush Rajvanshi
Aayush Rajvanshi
📖		Ely Alamillo
Ely Alamillo
💻 ⚠️		Daniel Afonso
Daniel Afonso
💻 ⚠️		Laurens Bosscher
Laurens Bosscher
💻
+ + + +This project follows the [all-contributors][all-contributors] specification. +Contributions of any kind welcome! + +## LICENSE + +[MIT](LICENSE) + + + +[npm]: https://www.npmjs.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 +[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 +[package]: https://www.npmjs.com/package/@testing-library/react +[downloads-badge]: https://img.shields.io/npm/dm/@testing-library/react.svg?style=flat-square +[npmtrends]: http://www.npmtrends.com/@testing-library/react +[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg +[spectrum]: https://spectrum.chat/testing-library +[license-badge]: https://img.shields.io/npm/l/@testing-library/react.svg?style=flat-square +[license]: https://github.com/testing-library/react-testing-library/blob/master/LICENSE +[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square +[prs]: http://makeapullrequest.com +[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square +[coc]: https://github.com/testing-library/react-testing-library/blob/master/CODE_OF_CONDUCT.md +[github-watch-badge]: https://img.shields.io/github/watchers/testing-library/react-testing-library.svg?style=social +[github-watch]: https://github.com/testing-library/react-testing-library/watchers +[github-star-badge]: https://img.shields.io/github/stars/testing-library/react-testing-library.svg?style=social +[github-star]: https://github.com/testing-library/react-testing-library/stargazers +[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-testing-library%20by%20%40@TestingLib%20https%3A%2F%2Fgithub.com%2Ftesting-library%2Freact-testing-library%20%F0%9F%91%8D +[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 +[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"+ +[reactiflux]: https://www.reactiflux.com/ +[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/cleanup-after-each.js b/cleanup-after-each.js new file mode 100644 index 0000000..ace739e --- /dev/null +++ b/cleanup-after-each.js @@ -0,0 +1,4 @@ +console.warn( + 'The module `@testing-library/react/cleanup-after-each` has been deprecated and no longer does anything (it is not needed). You no longer need to import this module and can safely remove any import or configuration which imports this module', +) +/* eslint no-console:0 */ diff --git a/dont-cleanup-after-each.js b/dont-cleanup-after-each.js new file mode 100644 index 0000000..083a818 --- /dev/null +++ b/dont-cleanup-after-each.js @@ -0,0 +1 @@ +process.env.RTL_SKIP_AUTO_CLEANUP = true diff --git a/other/MAINTAINING.md b/other/MAINTAINING.md new file mode 100644 index 0000000..703126d --- /dev/null +++ b/other/MAINTAINING.md @@ -0,0 +1,70 @@ +# Maintaining + +This is documentation for maintainers of this project. + +## Code of Conduct + +Please review, understand, and be an example of it. Violations of the code of +conduct are taken seriously, even (especially) for maintainers. + +## Issues + +We want to support and build the community. We do that best by helping people +learn to solve their own problems. We have an issue template and hopefully most +folks follow it. If it's not clear what the issue is, invite them to create a +minimal reproduction of what they're trying to accomplish or the bug they think +they've found. + +Once it's determined that a code change is necessary, point people to +[makeapullrequest.com](http://makeapullrequest.com) and invite them to make a +pull request. If they're the one who needs the feature, they're the one who can +build it. If they need some hand holding and you have time to lend a hand, +please do so. It's an investment into another human being, and an investment +into a potential maintainer. + +Remember that this is open source, so the code is not yours, it's ours. If +someone needs a change in the codebase, you don't have to make it happen +yourself. Commit as much time to the project as you want/need to. Nobody can ask +any more of you than that. + +## Pull Requests + +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. + +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 +positive as possible, so be uplifting and constructive. + +When you merge the pull request, 99% of the time you should use the +[Squash and merge](https://help.github.com/articles/merging-a-pull-request/) +feature. This keeps our git history clean, but more importantly, this allows us +to make any necessary changes to the commit message so we release what we want +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 +[`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 +necessary by the git commit messages. With this in mind, **please brush up on +[the commit message convention][commit] which drives our releases.** + +> One important note about this: Please make sure that commit messages do NOT +> contain the words "BREAKING CHANGE" in them unless we want to push a major +> version. I've been burned by this more than once where someone will include +> "BREAKING CHANGE: None" and it will end up releasing a new major version. Not +> a huge deal honestly, but kind of annoying... + +## Thanks! + +Thank you so much for helping to maintain this project! + +[commit]: + https://github.com/conventional-changelog-archived-repos/conventional-changelog-angular/blob/ed32559941719a130bb0327f886d6a32a8cbc2ba/convention.md diff --git a/other/USERS.md b/other/USERS.md new file mode 100644 index 0000000..4bc1281 --- /dev/null +++ b/other/USERS.md @@ -0,0 +1,12 @@ +# Users + +If you or your company uses this project, add your name to this list! Eventually +we may have a website to showcase these (wanna build it!?) + +> No users have been added yet! + + diff --git a/other/cheat-sheet.pdf b/other/cheat-sheet.pdf new file mode 100644 index 0000000..3cafbc3 Binary files /dev/null and b/other/cheat-sheet.pdf differ diff --git a/other/goat.png b/other/goat.png new file mode 100644 index 0000000..fe29faa Binary files /dev/null and b/other/goat.png differ diff --git a/other/manual-releases.md b/other/manual-releases.md new file mode 100644 index 0000000..0ae36c3 --- /dev/null +++ b/other/manual-releases.md @@ -0,0 +1,44 @@ +# manual-releases + +This project has an automated release set up. So things are only released when +there are useful changes in the code that justify a release. But sometimes +things get messed up one way or another and we need to trigger the release +ourselves. When this happens, simply bump the number below and commit that with +the following commit message based on your needs: + +**Major** + +``` +fix(release): manually release a major version + +There was an issue with a major release, so this manual-releases.md +change is to release a new major version. + +Reference: # + +BREAKING CHANGE: +``` + +**Minor** + +``` +feat(release): manually release a minor version + +There was an issue with a minor release, so this manual-releases.md +change is to release a new minor version. + +Reference: # +``` + +**Patch** + +``` +fix(release): manually release a patch version + +There was an issue with a patch release, so this manual-releases.md +change is to release a new patch version. + +Reference: # +``` + +The number of times we've had to do a manual release is: 4 diff --git a/other/testingjavascript.jpg b/other/testingjavascript.jpg new file mode 100644 index 0000000..e59e5ed Binary files /dev/null and b/other/testingjavascript.jpg differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..53a43cb --- /dev/null +++ b/package.json @@ -0,0 +1,88 @@ +{ + "name": "@testing-library/react", + "version": "0.0.0-semantically-released", + "description": "Simple and complete React DOM testing utilities that encourage good testing practices.", + "main": "dist/index.js", + "module": "dist/@testing-library/react.esm.js", + "engines": { + "node": ">=8" + }, + "scripts": { + "prebuild": "rimraf dist", + "build": "npm-run-all --parallel build:main build:bundle:main build:bundle:pure", + "build:main": "kcd-scripts build --no-clean", + "build:bundle:main": "kcd-scripts build --bundle --no-clean", + "build:bundle:pure": "cross-env BUILD_FILENAME_SUFFIX=.pure BUILD_INPUT=src/pure.js kcd-scripts build --bundle --no-clean", + "lint": "kcd-scripts lint", + "test": "kcd-scripts test", + "test:update": "npm test -- --updateSnapshot --coverage", + "validate": "kcd-scripts validate", + "setup": "npm install && npm run validate -s" + }, + "husky": { + "hooks": { + "pre-commit": "kcd-scripts pre-commit" + } + }, + "files": [ + "dist", + "cleanup-after-each.js", + "dont-cleanup-after-each.js", + "pure.js" + ], + "keywords": [ + "testing", + "react", + "ui", + "dom", + "jsdom", + "unit", + "integration", + "functional", + "end-to-end", + "e2e" + ], + "author": "Kent C. Dodds (http://kentcdodds.com/)", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.6.0", + "@testing-library/dom": "^6.3.0", + "@types/testing-library__react": "^9.1.0" + }, + "devDependencies": { + "@reach/router": "^1.2.1", + "@testing-library/jest-dom": "^4.1.0", + "cross-env": "^6.0.0", + "kcd-scripts": "^1.7.0", + "npm-run-all": "^4.1.5", + "react": "^16.9.0", + "react-dom": "^16.9.0", + "rimraf": "^3.0.0" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + }, + "eslintConfig": { + "extends": "./node_modules/kcd-scripts/eslint.js", + "rules": { + "react/prop-types": "off", + "import/no-unassigned-import": "off", + "import/named": "off" + } + }, + "eslintIgnore": [ + "node_modules", + "coverage", + "dist", + "*.d.ts" + ], + "repository": { + "type": "git", + "url": "https://github.com/testing-library/react-testing-library.git" + }, + "bugs": { + "url": "https://github.com/testing-library/react-testing-library/issues" + }, + "homepage": "https://github.com/testing-library/react-testing-library#readme" +} diff --git a/pure.js b/pure.js new file mode 100644 index 0000000..75dc045 --- /dev/null +++ b/pure.js @@ -0,0 +1,2 @@ +// makes it so people can import from '@testing-library/react/pure' +module.exports = require('./dist/pure') diff --git a/src/__mocks__/axios.js b/src/__mocks__/axios.js new file mode 100644 index 0000000..3097038 --- /dev/null +++ b/src/__mocks__/axios.js @@ -0,0 +1,8 @@ +module.exports = { + get: jest.fn(() => Promise.resolve({data: {}})), +} + +// Note: +// For now we don't need any other method (POST/PUT/PATCH), what we have already works fine. +// We will add more methods only if we need to. +// For reference please read: https://github.com/testing-library/react-testing-library/issues/2 diff --git a/src/__tests__/__snapshots__/render.js.snap b/src/__tests__/__snapshots__/render.js.snap new file mode 100644 index 0000000..eaf4144 --- /dev/null +++ b/src/__tests__/__snapshots__/render.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`supports fragments 1`] = ` + +
+ + DocumentFragment + + is pretty cool! +
+ +`; diff --git a/src/__tests__/act.js b/src/__tests__/act.js new file mode 100644 index 0000000..2adcee9 --- /dev/null +++ b/src/__tests__/act.js @@ -0,0 +1,45 @@ +import React from 'react' +import {render, fireEvent} from '../' + +test('render calls useEffect immediately', () => { + const effectCb = jest.fn() + function MyUselessComponent() { + React.useEffect(effectCb) + return null + } + render() + expect(effectCb).toHaveBeenCalledTimes(1) +}) + +test('findByTestId returns the element', async () => { + const ref = React.createRef() + const {findByTestId} = render(
) + expect(await findByTestId('foo')).toBe(ref.current) +}) + +test('fireEvent triggers useEffect calls', () => { + const effectCb = jest.fn() + function Counter() { + React.useEffect(effectCb) + const [count, setCount] = React.useState(0) + return + } + const { + container: {firstChild: buttonNode}, + } = render() + + effectCb.mockClear() + fireEvent.click(buttonNode) + expect(buttonNode).toHaveTextContent('1') + expect(effectCb).toHaveBeenCalledTimes(1) +}) + +test('calls to hydrate will run useEffects', () => { + const effectCb = jest.fn() + function MyUselessComponent() { + React.useEffect(effectCb) + return null + } + render(, {hydrate: true}) + expect(effectCb).toHaveBeenCalledTimes(1) +}) diff --git a/src/__tests__/auto-cleanup-skip.js b/src/__tests__/auto-cleanup-skip.js new file mode 100644 index 0000000..e5ef35a --- /dev/null +++ b/src/__tests__/auto-cleanup-skip.js @@ -0,0 +1,18 @@ +import React from 'react' + +let render +beforeAll(() => { + process.env.RTL_SKIP_AUTO_CLEANUP = 'true' + const rtl = require('../') + render = rtl.render +}) + +// This one verifies that if RTL_SKIP_AUTO_CLEANUP is set +// then we DON'T auto-wire up the afterEach for folks +test('first', () => { + render(
hi
) +}) + +test('second', () => { + expect(document.body.innerHTML).toEqual('
hi
') +}) diff --git a/src/__tests__/auto-cleanup.js b/src/__tests__/auto-cleanup.js new file mode 100644 index 0000000..1d0a795 --- /dev/null +++ b/src/__tests__/auto-cleanup.js @@ -0,0 +1,13 @@ +import React from 'react' +import {render} from '../' + +// This just verifies that by importing RTL in an +// environment which supports afterEach (like jest) +// we'll get automatic cleanup between tests. +test('first', () => { + render(
hi
) +}) + +test('second', () => { + expect(document.body.innerHTML).toEqual('') +}) diff --git a/src/__tests__/cleanup.js b/src/__tests__/cleanup.js new file mode 100644 index 0000000..ec2a057 --- /dev/null +++ b/src/__tests__/cleanup.js @@ -0,0 +1,28 @@ +import React from 'react' +import {render, cleanup} from '../' + +test('cleans up the document', () => { + const spy = jest.fn() + const divId = 'my-div' + + class Test extends React.Component { + componentWillUnmount() { + expect(document.getElementById(divId)).toBeInTheDocument() + spy() + } + + render() { + return
+ } + } + + render() + cleanup() + expect(document.body.innerHTML).toBe('') + expect(spy).toHaveBeenCalledTimes(1) +}) + +test('cleanup does not error when an element is not a child', () => { + render(
, {container: document.createElement('div')}) + cleanup() +}) diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js new file mode 100644 index 0000000..ad3b859 --- /dev/null +++ b/src/__tests__/debug.js @@ -0,0 +1,39 @@ +import React from 'react' +import {render} from '../' + +beforeEach(() => { + jest.spyOn(console, 'log').mockImplementation(() => {}) +}) + +afterEach(() => { + console.log.mockRestore() +}) + +test('debug pretty prints the container', () => { + const HelloWorld = () =>

Hello World

+ const {debug} = render() + debug() + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log).toHaveBeenCalledWith( + expect.stringContaining('Hello World'), + ) +}) + +test('debug pretty prints multiple containers', () => { + const HelloWorld = () => ( + <> +

Hello World

+

Hello World

+ + ) + const {getAllByTestId, debug} = render() + const multipleElements = getAllByTestId('testId') + debug(multipleElements) + + expect(console.log).toHaveBeenCalledTimes(2) + expect(console.log).toHaveBeenCalledWith( + expect.stringContaining('Hello World'), + ) +}) + +/* eslint no-console:0 */ diff --git a/src/__tests__/end-to-end.js b/src/__tests__/end-to-end.js new file mode 100644 index 0000000..4cdfc32 --- /dev/null +++ b/src/__tests__/end-to-end.js @@ -0,0 +1,39 @@ +import React from 'react' +import {render, wait} from '../' + +const fetchAMessage = () => + new Promise(resolve => { + // we are using random timeout here to simulate a real-time example + // of an async operation calling a callback at a non-deterministic time + const randomTimeout = Math.floor(Math.random() * 100) + setTimeout(() => { + resolve({returnedMessage: 'Hello World'}) + }, randomTimeout) + }) + +class ComponentWithLoader extends React.Component { + state = {loading: true} + async componentDidMount() { + const data = await fetchAMessage() + this.setState({data, loading: false}) // eslint-disable-line + } + render() { + if (this.state.loading) { + return
Loading...
+ } + return ( +
+ Loaded this message: {this.state.data.returnedMessage}! +
+ ) + } +} + +test('it waits for the data to be loaded', async () => { + const {queryByText, queryByTestId} = render() + + expect(queryByText('Loading...')).toBeTruthy() + + await wait(() => expect(queryByText('Loading...')).toBeNull()) + expect(queryByTestId('message').textContent).toMatch(/Hello World/) +}) diff --git a/src/__tests__/events.js b/src/__tests__/events.js new file mode 100644 index 0000000..afe2193 --- /dev/null +++ b/src/__tests__/events.js @@ -0,0 +1,178 @@ +import React from 'react' +import {render, fireEvent} from '../' + +const eventTypes = [ + { + type: 'Clipboard', + events: ['copy', 'paste'], + elementType: 'input', + }, + { + type: 'Composition', + events: ['compositionEnd', 'compositionStart', 'compositionUpdate'], + elementType: 'input', + }, + { + type: 'Keyboard', + events: ['keyDown', 'keyPress', 'keyUp'], + elementType: 'input', + init: {keyCode: 13}, + }, + { + type: 'Focus', + events: ['focus', 'blur'], + elementType: 'input', + }, + { + type: 'Form', + events: ['focus', 'blur'], + elementType: 'input', + }, + { + type: 'Focus', + events: ['input', 'invalid'], + elementType: 'input', + }, + { + type: 'Focus', + events: ['submit'], + elementType: 'form', + }, + { + type: 'Mouse', + events: [ + 'click', + 'contextMenu', + 'doubleClick', + 'drag', + 'dragEnd', + 'dragEnter', + 'dragExit', + 'dragLeave', + 'dragOver', + 'dragStart', + 'drop', + 'mouseDown', + 'mouseEnter', + 'mouseLeave', + 'mouseMove', + 'mouseOut', + 'mouseOver', + 'mouseUp', + ], + elementType: 'button', + }, + { + type: 'Selection', + events: ['select'], + elementType: 'input', + }, + { + type: 'Touch', + events: ['touchCancel', 'touchEnd', 'touchMove', 'touchStart'], + elementType: 'button', + }, + { + type: 'UI', + events: ['scroll'], + elementType: 'div', + }, + { + type: 'Wheel', + events: ['wheel'], + elementType: 'div', + }, + { + type: 'Media', + events: [ + 'abort', + 'canPlay', + 'canPlayThrough', + 'durationChange', + 'emptied', + 'encrypted', + 'ended', + 'error', + 'loadedData', + 'loadedMetadata', + 'loadStart', + 'pause', + 'play', + 'playing', + 'progress', + 'rateChange', + 'seeked', + 'seeking', + 'stalled', + 'suspend', + 'timeUpdate', + 'volumeChange', + 'waiting', + ], + elementType: 'video', + }, + { + type: 'Image', + events: ['load', 'error'], + elementType: 'img', + }, + { + type: 'Animation', + events: ['animationStart', 'animationEnd', 'animationIteration'], + elementType: 'div', + }, + { + type: 'Transition', + events: ['transitionEnd'], + elementType: 'div', + }, +] + +eventTypes.forEach(({type, events, elementType, init}) => { + describe(`${type} Events`, () => { + events.forEach(eventName => { + const propName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice( + 1, + )}` + + it(`triggers ${propName}`, () => { + const ref = React.createRef() + const spy = jest.fn() + + render( + React.createElement(elementType, { + [propName]: spy, + ref, + }), + ) + + fireEvent[eventName](ref.current, init) + expect(spy).toHaveBeenCalledTimes(1) + }) + }) + }) +}) + +test('onChange works', () => { + const handleChange = jest.fn() + const { + container: {firstChild: input}, + } = render() + fireEvent.change(input, {target: {value: 'a'}}) + expect(handleChange).toHaveBeenCalledTimes(1) +}) + +test('calling `fireEvent` directly works too', () => { + const handleEvent = jest.fn() + const { + container: {firstChild: button}, + } = render( + +
+ ) + } +} + +const wait = time => new Promise(resolve => setTimeout(resolve, time)) + +test('unmounts a component', async () => { + jest.spyOn(console, 'error').mockImplementation(() => {}) + const {unmount, getByText, container} = render() + fireEvent.click(getByText('Start')) + unmount() + // hey there reader! You don't need to have an assertion like this one + // this is just me making sure that the unmount function works. + // You don't need to do this in your apps. Just rely on the fact that this works. + expect(container.innerHTML).toBe('') + // just wait to see if the interval is cleared or not + // if it's not, then we'll call setState on an unmounted component + // and get an error. + // eslint-disable-next-line no-console + await wait(() => expect(console.error).not.toHaveBeenCalled()) +}) diff --git a/src/act-compat.js b/src/act-compat.js new file mode 100644 index 0000000..d758a97 --- /dev/null +++ b/src/act-compat.js @@ -0,0 +1,135 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import * as testUtils from 'react-dom/test-utils' + +const reactAct = testUtils.act +const actSupported = reactAct !== undefined + +// act is supported react-dom@16.8.0 +// so for versions that don't have act from test utils +// we do this little polyfill. No warnings, but it's +// better than nothing. +function actPolyfill(cb) { + ReactDOM.unstable_batchedUpdates(cb) + ReactDOM.render(
, document.createElement('div')) +} + +const act = reactAct || actPolyfill + +let youHaveBeenWarned = false +let isAsyncActSupported = null + +function asyncAct(cb) { + if (actSupported === true) { + if (isAsyncActSupported === null) { + return new Promise((resolve, reject) => { + // patch console.error here + const originalConsoleError = console.error + console.error = function error(...args) { + /* if console.error fired *with that specific message* */ + /* istanbul ignore next */ + const firstArgIsString = typeof args[0] === 'string' + if ( + firstArgIsString && + args[0].indexOf( + 'Warning: Do not await the result of calling ReactTestUtils.act', + ) === 0 + ) { + // v16.8.6 + isAsyncActSupported = false + } else if ( + firstArgIsString && + args[0].indexOf( + 'Warning: The callback passed to ReactTestUtils.act(...) function must not return anything', + ) === 0 + ) { + // no-op + } else { + originalConsoleError.apply(console, args) + } + } + let cbReturn, result + try { + result = reactAct(() => { + cbReturn = cb() + return cbReturn + }) + } catch (err) { + console.error = originalConsoleError + reject(err) + return + } + + result.then( + () => { + console.error = originalConsoleError + // if it got here, it means async act is supported + isAsyncActSupported = true + resolve() + }, + err => { + console.error = originalConsoleError + isAsyncActSupported = true + reject(err) + }, + ) + + // 16.8.6's act().then() doesn't call a resolve handler, so we need to manually flush here, sigh + + if (isAsyncActSupported === false) { + console.error = originalConsoleError + /* istanbul ignore next */ + if (!youHaveBeenWarned) { + // if act is supported and async act isn't and they're trying to use async + // act, then they need to upgrade from 16.8 to 16.9. + // This is a seemless upgrade, so we'll add a warning + console.error( + `It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least react-dom@16.9.0 to remove this warning.`, + ) + youHaveBeenWarned = true + } + + cbReturn.then(() => { + // a faux-version. + // todo - copy https://github.com/facebook/react/blob/master/packages/shared/enqueueTask.js + Promise.resolve().then(() => { + // use sync act to flush effects + act(() => {}) + resolve() + }) + }, reject) + } + }) + } else if (isAsyncActSupported === false) { + // use the polyfill directly + let result + act(() => { + result = cb() + }) + return result.then(() => { + return Promise.resolve().then(() => { + // use sync act to flush effects + act(() => {}) + }) + }) + } + // all good! regular act + return act(cb) + } + // use the polyfill + let result + act(() => { + result = cb() + }) + return result.then(() => { + return Promise.resolve().then(() => { + // use sync act to flush effects + act(() => {}) + }) + }) +} + +export default act +export {asyncAct} + +/* eslint no-console:0 */ diff --git a/src/flush-microtasks.js b/src/flush-microtasks.js new file mode 100644 index 0000000..a34b5e8 --- /dev/null +++ b/src/flush-microtasks.js @@ -0,0 +1,47 @@ +/* istanbul ignore file */ +// the part of this file that we need tested is definitely being run +// and the part that is not cannot easily have useful tests written +// anyway. So we're just going to ignore coverage for this file +/** + * copied from React's enqueueTask.js + */ + +let didWarnAboutMessageChannel = false +let enqueueTask +try { + // read require off the module object to get around the bundlers. + // we don't want them to detect a require and bundle a Node polyfill. + const requireString = `require${Math.random()}`.slice(0, 7) + const nodeRequire = module && module[requireString] + // assuming we're in node, let's try to get node's + // version of setImmediate, bypassing fake timers if any. + enqueueTask = nodeRequire('timers').setImmediate +} catch (_err) { + // we're in a browser + // we can't use regular timers because they may still be faked + // so we try MessageChannel+postMessage instead + enqueueTask = callback => { + if (didWarnAboutMessageChannel === false) { + didWarnAboutMessageChannel = true + // eslint-disable-next-line no-console + console.error( + typeof MessageChannel !== 'undefined', + 'This browser does not have a MessageChannel implementation, ' + + 'so enqueuing tasks via await act(async () => ...) will fail. ' + + 'Please file an issue at https://github.com/facebook/react/issues ' + + 'if you encounter this warning.', + ) + } + const channel = new MessageChannel() + channel.port1.onmessage = callback + channel.port2.postMessage(undefined) + } +} + +export default function flushMicroTasks() { + return { + then(resolve) { + enqueueTask(resolve) + }, + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..5e94267 --- /dev/null +++ b/src/index.js @@ -0,0 +1,16 @@ +import flush from './flush-microtasks' +import {cleanup} from './pure' + +// if we're running in a test runner that supports afterEach +// then we'll automatically run cleanup afterEach test +// this ensures that tests run in isolation from each other +// if you don't like this then either import the `pure` module +// or set the RTL_SKIP_AUTO_CLEANUP env variable to 'true'. +if (typeof afterEach === 'function' && !process.env.RTL_SKIP_AUTO_CLEANUP) { + afterEach(async () => { + await flush() + cleanup() + }) +} + +export * from './pure' diff --git a/src/pure.js b/src/pure.js new file mode 100644 index 0000000..1b1838b --- /dev/null +++ b/src/pure.js @@ -0,0 +1,157 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import { + getQueriesForElement, + prettyDOM, + fireEvent as dtlFireEvent, + configure as configureDTL, +} from '@testing-library/dom' +import act, {asyncAct} from './act-compat' + +configureDTL({ + asyncWrapper: async cb => { + let result + await asyncAct(async () => { + result = await cb() + }) + return result + }, +}) + +const mountedContainers = new Set() + +function render( + ui, + { + container, + baseElement = container, + queries, + hydrate = false, + wrapper: WrapperComponent, + } = {}, +) { + if (!baseElement) { + // default to document.body instead of documentElement to avoid output of potentially-large + // head elements (such as JSS style blocks) in debug output + baseElement = document.body + } + if (!container) { + container = baseElement.appendChild(document.createElement('div')) + } + + // we'll add it to the mounted containers regardless of whether it's actually + // added to document.body so the cleanup method works regardless of whether + // they're passing us a custom container or not. + mountedContainers.add(container) + + const wrapUiIfNeeded = innerElement => + WrapperComponent + ? React.createElement(WrapperComponent, null, innerElement) + : innerElement + + act(() => { + if (hydrate) { + ReactDOM.hydrate(wrapUiIfNeeded(ui), container) + } else { + ReactDOM.render(wrapUiIfNeeded(ui), container) + } + }) + + return { + container, + baseElement, + debug: (el = baseElement) => + Array.isArray(el) + ? // eslint-disable-next-line no-console + el.forEach(e => console.log(prettyDOM(e))) + : // eslint-disable-next-line no-console, + console.log(prettyDOM(el)), + unmount: () => ReactDOM.unmountComponentAtNode(container), + rerender: rerenderUi => { + render(wrapUiIfNeeded(rerenderUi), {container, baseElement}) + // Intentionally do not return anything to avoid unnecessarily complicating the API. + // folks can use all the same utilities we return in the first place that are bound to the container + }, + asFragment: () => { + /* istanbul ignore if (jsdom limitation) */ + if (typeof document.createRange === 'function') { + return document + .createRange() + .createContextualFragment(container.innerHTML) + } + + const template = document.createElement('template') + template.innerHTML = container.innerHTML + return template.content + }, + ...getQueriesForElement(baseElement, queries), + } +} + +function cleanup() { + mountedContainers.forEach(cleanupAtContainer) +} + +// maybe one day we'll expose this (perhaps even as a utility returned by render). +// but let's wait until someone asks for it. +function cleanupAtContainer(container) { + ReactDOM.unmountComponentAtNode(container) + if (container.parentNode === document.body) { + document.body.removeChild(container) + } + mountedContainers.delete(container) +} + +// react-testing-library's version of fireEvent will call +// dom-testing-library's version of fireEvent wrapped inside +// an "act" call so that after all event callbacks have been +// been called, the resulting useEffect callbacks will also +// be called. +function fireEvent(...args) { + let returnValue + act(() => { + returnValue = dtlFireEvent(...args) + }) + return returnValue +} + +Object.keys(dtlFireEvent).forEach(key => { + fireEvent[key] = (...args) => { + let returnValue + act(() => { + returnValue = dtlFireEvent[key](...args) + }) + return returnValue + } +}) + +// React event system tracks native mouseOver/mouseOut events for +// running onMouseEnter/onMouseLeave handlers +// @link https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/events/EnterLeaveEventPlugin.js#L24-L31 +fireEvent.mouseEnter = fireEvent.mouseOver +fireEvent.mouseLeave = fireEvent.mouseOut + +fireEvent.select = (node, init) => { + // React tracks this event only on focused inputs + node.focus() + + // React creates this event when one of the following native events happens + // - contextMenu + // - mouseUp + // - dragEnd + // - keyUp + // - keyDown + // so we can use any here + // @link https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/events/SelectEventPlugin.js#L203-L224 + fireEvent.keyUp(node, init) +} + +// just re-export everything from dom-testing-library +export * from '@testing-library/dom' +export {render, cleanup, fireEvent, act} + +// NOTE: we're not going to export asyncAct because that's our own compatibility +// thing for people using react-dom@16.8.0. Anyone else doesn't need it and +// people should just upgrade anyway. + +/* eslint func-name-matching:0 */ diff --git a/tests/setup-env.js b/tests/setup-env.js new file mode 100644 index 0000000..264828a --- /dev/null +++ b/tests/setup-env.js @@ -0,0 +1 @@ +import '@testing-library/jest-dom/extend-expect'