├── README.md
├── .gitignore
├── .prettierrc
├── src
    ├── index.js
    └── index.test.js
├── package.json
├── .github
    └── workflows
    │   └── main.yml
└── public
    └── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # react-testing-library-help
2 | 
3 | Hi! Need help with React Testing Library? The best way to get it is by forking
4 | this repository, making a reproduction of your issue (or showing what you're
5 | trying to do), and posting a link to your fork on our Discord chat:
6 | https://testing-library.com/discord
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | .docz


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "avoid",
 3 |   "bracketSpacing": false,
 4 |   "endOfLine": "lf",
 5 |   "htmlWhitespaceSensitivity": "css",
 6 |   "insertPragma": false,
 7 |   "jsxBracketSameLine": false,
 8 |   "jsxSingleQuote": false,
 9 |   "printWidth": 80,
10 |   "proseWrap": "always",
11 |   "quoteProps": "as-needed",
12 |   "requirePragma": false,
13 |   "semi": false,
14 |   "singleQuote": true,
15 |   "tabWidth": 2,
16 |   "trailingComma": "all",
17 |   "useTabs": false
18 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | function App() {
 5 |   return (
 6 |     <>
 7 |       <p>
 8 |         Hi! Need help with React Testing Library? The best way to get it is by
 9 |         forking this repo, making a reproduction of your issue (or
10 |         showing what you're trying to do), and posting a link to it on our
11 |         Discord chat:
12 |       </p>
13 |       <a
14 |         target="_blank"
15 |         rel="noopener noreferrer"
16 |         href="https://testing-library.com/discord"
17 |       >
18 |         testing-library.com/discord
19 |       </a>
20 |     </>
21 |   )
22 | }
23 | 
24 | ReactDOM.render(<App />, document.getElementById('root'))
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-testing-library-help",
 3 |   "version": "0.1.0",
 4 |   "description": "Use this to get help with React Testing Library",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "5.14.1",
 8 |     "@testing-library/react": "12.0.0",
 9 |     "@testing-library/user-event": "13.2.0",
10 |     "react": "17.0.2",
11 |     "react-dom": "17.0.2",
12 |     "react-scripts": "4.0.3"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test --env=jsdom",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
21 | }
22 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ main ]
 6 |   pull_request:
 7 |     branches: [ main ]
 8 |   workflow_dispatch:
 9 | 
10 | concurrency:
11 |   group: ${{ github.workflow }}-${{ github.ref }}
12 |   cancel-in-progress: true
13 | 
14 | jobs:
15 |   build:
16 |     runs-on: ubuntu-latest
17 |     steps:
18 |       - name: ⬇️ Checkout repo
19 |         uses: actions/checkout@v2
20 | 
21 |       - name: ⎔ Setup node
22 |         uses: actions/setup-node@v2
23 |         with:
24 |           node-version: 16
25 | 
26 |       - name: 📥 Download deps
27 |         uses: bahmutov/npm-install@v1
28 |         with:
29 |           useLockFile: false
30 | 
31 |       - name: ▶️ Run validate script
32 |         run: npm run test
33 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 8 |     />
 9 |     <meta name="theme-color" content="#000000" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is added to the
12 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 | 
28 |   <body>
29 |     <noscript>
30 |       You need to enable JavaScript to run this app.
31 |     </noscript>
32 |     <div id="root"></div>
33 |     <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Hi! Need help with React Testing Library? The best way to get it is by forking
 3 | this repository, making a reproduction of your issue (or showing what you're
 4 | trying to do), and posting a link to your fork on our Discord chat:
 5 | 
 6 | https://testing-library.com/discord
 7 | */
 8 | 
 9 | // here's an example
10 | import * as React from 'react'
11 | import '@testing-library/jest-dom'
12 | import userEvent from '@testing-library/user-event'
13 | import {render, screen} from '@testing-library/react'
14 | 
15 | const CountContext = React.createContext()
16 | function countReducer(state, action) {
17 |   switch (action.type) {
18 |     case 'increment': {
19 |       return {count: state.count + 1}
20 |     }
21 |     case 'decrement': {
22 |       return {count: state.count - 1}
23 |     }
24 |     default: {
25 |       throw new Error(`Unhandled action type: ${action.type}`)
26 |     }
27 |   }
28 | }
29 | function CountProvider({children}) {
30 |   const [state, dispatch] = React.useReducer(countReducer, {count: 0})
31 |   const value = {state, dispatch}
32 |   return <CountContext.Provider value={value}>{children}</CountContext.Provider>
33 | }
34 | function useCount() {
35 |   const context = React.useContext(CountContext)
36 |   if (context === undefined) {
37 |     throw new Error('useCount must be used within a CountProvider')
38 |   }
39 |   return context
40 | }
41 | 
42 | function Counter() {
43 |   const {state, dispatch} = useCount()
44 |   return (
45 |     <div>
46 |       {state.count}
47 |       <button onClick={() => dispatch('decrement')}>-</button>
48 |       <button onClick={() => dispatch('increment')}>+</button>
49 |     </div>
50 |   )
51 | }
52 | 
53 | // mock console.error to do nothing because it logs an error when there's a
54 | // rendering error and we don't need those locks mucking up our output.
55 | beforeAll(() => {
56 |   jest.spyOn(console, 'error').mockImplementation(() => {})
57 | })
58 | 
59 | afterAll(() => {
60 |   console.error.mockRestore()
61 | })
62 | 
63 | afterEach(() => {
64 |   jest.clearAllMocks()
65 | })
66 | 
67 | test('useCount throws an error when not rendered in the CountProvider', async () => {
68 |   expect(() => render(<Counter />)).toThrow(
69 |     /useCount must be used within a CountProvider/i,
70 |   )
71 |   // React logs to console.error twice when there's a rendering error
72 |   expect(console.error).toHaveBeenCalledTimes(2)
73 | })
74 | 


--------------------------------------------------------------------------------