55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 68 | 9 69 | 10 70 | 11 71 | 12 72 | 13 73 | 14 74 | 15 75 | 16 76 | 17 77 | 18 78 | 19 79 | 20 80 | 21 81 | 22 82 | 23 83 | 24 84 | 25 85 | 26 86 | 27 87 | 28 88 | 29 89 | 30 90 | 31 91 | 32 92 | 33 93 | 34 94 | 35 95 | 36 96 | 37 97 | 38 98 | 39 99 | 40 100 | 41 101 | 42 102 | 43 103 | 44 104 | 45 105 | 46 | 106 | 107 | 108 | 109 | 1x 110 | 111 | 1x 112 | 1x 113 | 114 | 115 | 3x 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 2x 126 | 127 | 128 | 129 | 130 | 1x 131 | 1x 132 | 133 | 2x 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | | import * as React from 'react'
151 | import {reportError} from './utils'
152 |
153 | class ErrorBoundary extends React.Component {
154 | state = {hasError: false}
155 | componentDidCatch(error, info) {
156 | this.setState({hasError: true})
157 | reportError(error, info)
158 | }
159 | render() {
160 | return this.state.hasError ? (
161 | <div>There was a problem</div>
162 | ) : (
163 | this.props.children
164 | )
165 | }
166 | }
167 |
168 | class Bomb extends React.Component {
169 | render() {
170 | return this['💣'].caboom()
171 | }
172 | }
173 |
174 | class BombButton extends React.Component {
175 | state = {renderBomb: false}
176 | handleBombClick = () => this.setState({renderBomb: true})
177 | render() {
178 | return (
179 | <ErrorBoundary>
180 | {this.state.renderBomb ? (
181 | <Bomb />
182 | ) : (
183 | <button onClick={this.handleBombClick}>
184 | <span role="img" aria-label="bomb">
185 | 💣
186 | </span>
187 | </button>
188 | )}
189 | </ErrorBoundary>
190 | )
191 | }
192 | }
193 |
194 | export {BombButton}
195 | |
55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 68 | 9 69 | 10 70 | 11 71 | 12 72 | 13 73 | 14 74 | 15 75 | 16 76 | 17 77 | 18 78 | 19 79 | 20 80 | 21 81 | 22 82 | 23 83 | 24 84 | 25 85 | 26 86 | 27 87 | 28 88 | 29 89 | 30 90 | 31 91 | 32 92 | 33 93 | 34 94 | 35 95 | 36 96 | 37 97 | 38 98 | 39 99 | 40 100 | 41 101 | 42 102 | 43 103 | 44 104 | 45 105 | 46 106 | 47 107 | 48 108 | 49 109 | 50 110 | 51 111 | 52 112 | 53 113 | 54 114 | 55 115 | 56 116 | 57 117 | 58 118 | 59 119 | 60 120 | 61 121 | 62 122 | 63 123 | 64 124 | 65 | 125 | 126 | 127 | 128 | 1x 129 | 130 | 131 | 132 | 133 | 134 | 2x 135 | 136 | 1x 137 | 138 | 139 | 140 | 141 | 142 | 1x 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 5x 155 | 156 | 157 | 158 | 5x 159 | 160 | 5x 161 | 2x 162 | 163 | 164 | 1x 165 | 1x 166 | 1x 167 | 1x 168 | 169 | 170 | 1x 171 | 172 | 173 | 174 | 5x 175 | 176 | 5x 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | | import * as React from 'react'
189 | import {useState, useReducer} from 'react'
190 | import axios from 'axios'
191 |
192 | const initialState = {
193 | error: null,
194 | greeting: null,
195 | }
196 |
197 | function greetingReducer(state, action) {
198 | switch (action.type) {
199 | case 'SUCCESS': {
200 | return {
201 | error: null,
202 | greeting: action.greeting,
203 | }
204 | }
205 | case 'ERROR': {
206 | return {
207 | error: action.error,
208 | greeting: null,
209 | }
210 | }
211 | default: {
212 | return state
213 | }
214 | }
215 | }
216 |
217 | function FetchGreeting() {
218 | const [{error, greeting}, dispatch] = useReducer(
219 | greetingReducer,
220 | initialState,
221 | )
222 | const [buttonClicked, setButtonClicked] = useState(false)
223 |
224 | const fetchGreeting = async () => {
225 | axios
226 | .get('/greeting')
227 | .then((response) => {
228 | const {data} = response
229 | const {greeting} = data
230 | dispatch({type: 'SUCCESS', greeting})
231 | setButtonClicked(true)
232 | })
233 | .catch((error) => {
234 | dispatch({type: 'ERROR', error})
235 | })
236 | }
237 |
238 | const buttonText = buttonClicked ? 'Ok' : 'Load Greeting'
239 |
240 | return (
241 | <div>
242 | <button onClick={fetchGreeting} disabled={buttonClicked}>
243 | {buttonText}
244 | </button>
245 | {greeting && <h1>{greeting}</h1>}
246 | {error && <p role="alert">Oops, failed to fetch!</p>}
247 | </div>
248 | )
249 | }
250 |
251 | export {FetchGreeting}
252 | |
55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || File | 64 |65 | | Statements | 66 |67 | | Branches | 68 |69 | | Functions | 70 |71 | | Lines | 72 |73 | |
|---|---|---|---|---|---|---|---|---|---|
| component-did-catch.js | 77 |
78 |
79 | |
80 | 100% | 81 |9/9 | 82 |100% | 83 |4/4 | 84 |100% | 85 |5/5 | 86 |100% | 87 |8/8 | 88 |
| fetch-greeting.js | 92 |
93 |
94 | |
95 | 93.75% | 96 |15/16 | 97 |88.89% | 98 |8/9 | 99 |100% | 100 |5/5 | 101 |93.75% | 102 |15/16 | 103 |
| index.js | 107 |
108 |
109 | |
110 | 0% | 111 |0/2 | 112 |100% | 113 |0/0 | 114 |0% | 115 |0/1 | 116 |0% | 117 |0/2 | 118 |
| lazy-component.js | 122 |
123 |
124 | |
125 | 100% | 126 |1/1 | 127 |100% | 128 |0/0 | 129 |100% | 130 |1/1 | 131 |100% | 132 |1/1 | 133 |
| react-context.js | 137 |
138 |
139 | |
140 | 100% | 141 |7/7 | 142 |100% | 143 |0/0 | 144 |100% | 145 |3/3 | 146 |100% | 147 |7/7 | 148 |
| utils.js | 152 |
153 |
154 | |
155 | 0% | 156 |0/1 | 157 |100% | 158 |0/0 | 159 |0% | 160 |0/1 | 161 |0% | 162 |0/1 | 163 |
55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 68 | 9 69 | 10 70 | 11 71 | 12 72 | 13 73 | 14 74 | 15 75 | 16 76 | 17 77 | 18 78 | 19 79 | 20 80 | 21 81 | 22 82 | 23 83 | 24 84 | 25 85 | 26 86 | 27 87 | 28 88 | 29 89 | 30 90 | 31 91 | 32 92 | 33 93 | 34 94 | 35 95 | 36 96 | 37 97 | 38 98 | 39 99 | 40 100 | 41 101 | 42 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | | import * as React from 'react'
143 | import {render} from 'react-dom'
144 |
145 | function App() {
146 | return (
147 | <div>
148 | <h1>
149 | react-testing-library examples{' '}
150 | <span role="img" aria-label="goat">
151 | 🐐
152 | </span>
153 | </h1>
154 | <div>
155 | <p>{`
156 | This is an example project of how to test react components using
157 | react-testing-library and Jest. The idea is that most of the tests
158 | should be runnable in codesandbox to make it easy to try things out,
159 | fork, contribute, etc. However, there will be some tests which do not
160 | work in codesandbox and we'll put those in a special folder called
161 | __local_tests__. Locally (and in CI) all tests are run via the "test"
162 | script, in codesandbox only the tests in __tests__ will be run.
163 | If you can make it work in codesandbox then do because it's a lot
164 | easier for people to tinker with things in codesandbox.
165 | `}</p>
166 | <p>
167 | <a href="https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples">
168 | Open this in codesandbox
169 | </a>{' '}
170 | to play around with things. You can also use the codesandbox to
171 | contribute to{' '}
172 | <a href="https://github.com/kentcdodds/react-testing-library-examples">
173 | the project on GitHub
174 | </a>
175 | !
176 | </p>
177 | </div>
178 | </div>
179 | )
180 | }
181 |
182 | render(<App />, document.getElementById('root'))
183 | |
55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 | 68 | 69 | 70 | 2x 71 | 72 | 73 | 74 | | import * as React from 'react'
75 |
76 | function LazyComponent() {
77 | return <div>I am lazy!</div>
78 | }
79 |
80 | export default LazyComponent
81 | |
55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 68 | 9 69 | 10 70 | 11 71 | 12 72 | 13 73 | 14 74 | 15 75 | 16 76 | 17 77 | 18 78 | 19 | 79 | 80 | 1x 81 | 82 | 1x 83 | 2x 84 | 2x 85 | 86 | 87 | 88 | 89 | 1x 90 | 3x 91 | 3x 92 | 93 | 94 | 95 | 96 | | import * as React from 'react'
97 |
98 | const NameContext = React.createContext('Unknown')
99 |
100 | const NameProvider = ({children, first, last}) => {
101 | const fullName = `${first} ${last}`
102 | return (
103 | <NameContext.Provider value={fullName}>{children}</NameContext.Provider>
104 | )
105 | }
106 |
107 | const NameConsumer = () => (
108 | <NameContext.Consumer>
109 | {value => <div>My Name Is: {value}</div>}
110 | </NameContext.Consumer>
111 | )
112 |
113 | export {NameContext, NameConsumer, NameProvider}
114 | |
55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |
57 || 1 61 | 2 62 | 3 63 | 4 64 | 5 65 | 6 66 | 7 67 | 8 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | | function reportError() { 75 | // in a real app this would report an error 76 | // but this isn't a real app and is only here to be mocked. 77 | return Promise.resolve({success: true}) 78 | } 79 | 80 | export {reportError} 81 | |
Oops, failed to fetch!
} 60 |{` 15 | This is an example project of how to test react components using 16 | react-testing-library and Jest. The idea is that most of the tests 17 | should be runnable in codesandbox to make it easy to try things out, 18 | fork, contribute, etc. Either clone the repo locally or run the tests 19 | in a terminal in codesandbox (run "npm test") and it should watch your 20 | changes in the codesandbox and re-run the tests as you make changes. 21 | `}
22 |23 | 24 | Open this in codesandbox 25 | {' '} 26 | to play around with things. You can also use the codesandbox to 27 | contribute to{' '} 28 | 29 | the project on GitHub 30 | 31 | ! 32 |
33 |