@testing-library/react - npm Package Compare versions

Comparing version 10.2.0 to 10.2.1

package.json

 {
   "name": "@testing-library/react",
-  "version": "10.2.0",
+  "version": "10.2.1",
   "description": "Simple and complete React DOM testing utilities that encourage good testing practices.",
@@ -28,2 +28,3 @@ "main": "dist/index.js",
     "pure.js",
+    "pure.d.ts",
     "types"
@@ -30,0 +31,0 @@ ],

README.md

@@ -266,3 +266,5 @@ <div align="center">
 export default Login
+```
 
+```jsx
 // __tests__/login.js
@@ -273,14 +275,20 @@ // again, these first two imports are something you'd normally handle in
 import React from 'react'
+// import API mocking utilities from Mock Service Worker.
+import {rest} from 'msw'
+import {setupServer} from 'msw/node'
+// import testing utilities
 import {render, fireEvent, screen} 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 server = setupServer(
+  rest.post('/api/login', (req, res, ctx) => {
+    return res(ctx.json({token: 'fake_user_token'}))
   })
+)
 
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+
+test('allows the user to login successfully', async () => {
   render(<Login />)
@@ -308,4 +316,38 @@
 })
+
+test('handles server exceptions', async () => {
+  // mock the server error response for this test suite only.
+  server.use(
+    rest.post('/', (req, res, ctx) => {
+      return res(
+        ctx.status(500),
+        ctx.json({message: 'Internal server error'}),
+      )
+    })
+  )
+
+  render(<Login />)
+
+  // fill out the form
+  fireEvent.change(screen.getByLabelText(/username/i), {
+    target: {value: 'chuck'},
+  })
+  fireEvent.change(screen.getByLabelText(/password/i), {
+    target: {value: 'norris'},
+  })
+
+  fireEvent.click(screen.getByText(/submit/i))
+
+  // wait for the error message
+  const alert = await screen.findByRole('alert')
+
+  expect(alert).toHaveTextContent(/internal server error/i)
+  expect(window.localStorage.getItem('token')).toBeNull()
+})
 ```
 
+> We recommend using [Mock Service Worker](https://github.com/mswjs/msw) library
+> to declaratively mock API communication in your tests instead of stubbing
+> `window.fetch`, or relying on third-party adapters.
+
 ### More Examples
@@ -544,2 +586,6 @@
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/NiGhTTraX"><img src="https://avatars0.githubusercontent.com/u/485061?v=4" width="100px;" alt=""/><br /><sub><b>Andrei Picus</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/issues?q=author%3ANiGhTTraX" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/react-testing-library/pulls?q=is%3Apr+reviewed-by%3ANiGhTTraX" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://redd.one"><img src="https://avatars3.githubusercontent.com/u/14984911?v=4" width="100px;" alt=""/><br /><sub><b>Artem Zakharchenko</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=kettanaito" title="Documentation">📖</a></td>
+  </tr>
 </table>
@@ -546,0 +592,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4818014

increased by0.04%

Number of package files

29

increased by3.57%

Lines of code

29969

Number of lines in readme file

637

increased by7.78%

No dependency changes