Counter

103 |

106 |

107 | `; 108 | -------------------------------------------------------------------------------- /src/components/__snapshots__/ReminderItem.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` match snapshot 1`] = ` 4 | .c2 { 5 | width: 5px; 6 | background-color: white; 7 | -webkit-flex: 0 0 auto; 8 | -ms-flex: 0 0 auto; 9 | flex: 0 0 auto; 10 | } 11 | 12 | .c0 { 13 | background-color: #495265; 14 | position: relative; 15 | box-shadow: 8px 8px rgba(0,0,0,0.15); 16 | margin: 30px 0; 17 | display: -webkit-box; 18 | display: -webkit-flex; 19 | display: -ms-flexbox; 20 | display: flex; 21 | -webkit-flex-direction: row; 22 | -ms-flex-direction: row; 23 | flex-direction: row; 24 | } 25 | 26 | .c1 { 27 | display: block; 28 | text-align: center; 29 | color: white; 30 | font-weight: 500; 31 | font-size: 42px; 32 | padding: 39px 50px; 33 | padding: 20px 30px; 34 | font-size: 34px; 35 | -webkit-flex: 1 1 auto; 36 | -ms-flex: 1 1 auto; 37 | flex: 1 1 auto; 38 | text-align: left; 39 | } 40 | 41 | .c3 { 42 | color: white; 43 | font-weight: 500; 44 | font-size: 42px; 45 | padding: 39px 50px; 46 | -webkit-appearance: none; 47 | -moz-appearance: none; 48 | appearance: none; 49 | border: none; 50 | outline: none; 51 | background-color: transparent; 52 | -webkit-user-select: none; 53 | -moz-user-select: none; 54 | -ms-user-select: none; 55 | user-select: none; 56 | cursor: pointer; 57 | padding: 20px 30px; 58 | font-size: 34px; 59 | } 60 | 61 | .c3:active { 62 | opacity: 0.5; 63 | } 64 | 65 | .c4 { 66 | -webkit-transform: rotate(45deg); 67 | -ms-transform: rotate(45deg); 68 | transform: rotate(45deg); 69 | -webkit-transform-origin: center; 70 | -ms-transform-origin: center; 71 | transform-origin: center; 72 | display: inline-block; 73 | } 74 | 75 |

79 | 82 | The Label 83 | 84 |

87 | 97 |

98 | `; 99 | -------------------------------------------------------------------------------- /src/components/PageURL.test.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import renderer from "react-test-renderer"; 3 | import "jest-styled-components"; 4 | import { MemoryRouter } from "react-router-dom"; 5 | 6 | import RoutedPageURL, { PageURL, createRandomString } from "./PageURL"; 7 | 8 | describe("PageURL", () => { 9 | // Normally a functional component can just be tested with a snapshot 10 | // but here that doesn't work, the Link inside PageURL needs to be in 11 | // the react-router-dom context. 12 | it("throws error when rendered without router context", () => { 13 | console.error = jest.fn(); // removes error log from test output 14 | const shouldThrow = () => 15 | renderer.create(); 16 | expect(shouldThrow).toThrowError(); 17 | }); 18 | 19 | it("matches snapshot", () => { 20 | // The default nextUrl prop is set to create a random string. 21 | // This will break the snapshots everytime therefor random data 22 | // should never be used with snapshots. 23 | // Snapshot expect predictable behaviour. 24 | const nextUrl = "next_url"; 25 | // Add the MemoryRouter with an initial state to inject the 26 | // react-router-dom context the Link component needs. 27 | const tree = renderer.create( 28 | 29 | 30 | 31 | ); 32 | expect(tree).toMatchSnapshot(); 33 | }); 34 | 35 | // Test the createRandomString generator seperatly to see if it 36 | // returns random strings as expected. 37 | describe("createRandomString", () => { 38 | it("returns random strings", () => { 39 | const val1 = createRandomString(); 40 | expect(typeof val1).toBe("string"); 41 | 42 | const val2 = createRandomString(); 43 | expect(typeof val2).toBe("string"); 44 | 45 | expect(val1).not.toBe(val2); 46 | }); 47 | 48 | it("returns string of length 5", () => { 49 | const val1 = createRandomString(); 50 | expect(typeof val1).toBe("string"); 51 | expect(val1).toHaveLength(5); 52 | }); 53 | }); 54 | }); 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Testing your React App with Jest 🃏 2 | 3 | The following scenarios will be covered: 4 | 5 | ### Basic 6 | 7 | 1. Test an interaction with a DOM element that updates state. [[`Counter`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/Counter.test.jsx)] 8 | 1. Test a component wrapped in a [HOC](https://reactjs.org/docs/higher-order-components.html) (e.g. [Redux](https://redux.js.org/)' mapState). [[`ScreenWidth`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/ScreenWidth.test.jsx), [`PageURL`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/PageURL.test.jsx)] 9 | 1. Create [snapshots](https://jestjs.io/docs/en/snapshot-testing) for the above. [[`All component tests`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components)] 10 | 11 | ### Advanced 12 | 13 | 4. Test a component that is wrapped in the [React context](https://reactjs.org/docs/context.html). [[`PageURL`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/PageURL.test.jsx)] 14 | 1. Test a [React ref](https://reactjs.org/docs/refs-and-the-dom.html) attached to a DOM node. [[`Reminder`](https://github.com/mikeheddes/react-testing-demo/blob/test-solutions/src/components/Reminder.test.jsx)] 15 | 1. Test code that uses browser global variables. [[`ScreenWidth`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/ScreenWidth.test.jsx)] 16 | 17 | ### Project structure 18 | 19 | The components and tests are in [`./src/components`](https://github.com/mikeheddes/react-testing-demo/tree/master/src/components). 20 | The tests for `Component.jsx` are in `Component.test.jsx`. 21 | 22 | ## Available Scripts 23 | 24 | In the project directory, you can run: 25 | 26 | ### `npm start` 27 | 28 | Runs the app in the development mode.
29 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 30 | 31 | The page will reload if you make edits.
32 | You will also see any lint errors in the console. 33 | 34 | ### `npm test` 35 | 36 | Runs the tests in watch mode. 37 | 38 | ### `npm run test:watch` 39 | 40 | Runs the tests in watch mode and shows the test coverage. 41 | -------------------------------------------------------------------------------- /src/components/Reminder.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import styled from "styled-components"; 3 | 4 | import { Wrapper, Label, Button, Line } from "./Other"; 5 | import Item from "./ReminderItem"; 6 | 7 | const Input = styled(Label)` 8 | text-align: left; 9 | appearance: none; 10 | border: none; 11 | outline: none; 12 | background-color: transparent; 13 | flex: 1 1 auto; 14 | min-width: 0px; 15 | 16 | &::placeholder { 17 | color: white; 18 | opacity: 0.7; 19 | } 20 | `; 21 | 22 | const ToDoWrapper = styled(Wrapper)` 23 | display: flex; 24 | flex-direction: row; 25 | `; 26 | 27 | class Reminder extends Component { 28 | input = React.createRef(); 29 | 30 | state = { reminders: ["Buy an apple"], value: "" }; 31 | 32 | addReminder = () => { 33 | const label = this.state.value; 34 | if (!label) return; 35 | if (this.state.reminders.indexOf(label) !== -1) return; 36 | this.setState({ 37 | reminders: [...this.state.reminders, label], 38 | value: "" 39 | }); 40 | }; 41 | 42 | removeReminder = i => { 43 | const reminders = [...this.state.reminders]; 44 | reminders.splice(i, 1); 45 | this.setState({ reminders }); 46 | }; 47 | 48 | focusInput = () => { 49 | this.input.current.focus(); 50 | }; 51 | 52 | handleInputChange = e => { 53 | this.setState({ value: e.target.value }); 54 | }; 55 | 56 | handleKeyPress = e => { 57 | if (e.key === "Enter") { 58 | this.addReminder(); 59 | } 60 | }; 61 | 62 | render() { 63 | const { reminders, value } = this.state; 64 | return ( 65 | <> 66 | 67 | 77 | 78 | 79 | 80 | 81 | {reminders.map((reminder, i) => ( 82 | this.removeReminder(i)} key={reminder}> 83 | {reminder} 84 | 85 | ))} 86 | 87 | ); 88 | } 89 | } 90 | 91 | export default Reminder; 92 | -------------------------------------------------------------------------------- /src/components/ScreenWidth.test.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { shallow } from "enzyme"; 3 | import renderer from "react-test-renderer"; 4 | import "jest-styled-components"; 5 | 6 | import HOCScreenWidth, { ScreenWidth } from "./ScreenWidth"; 7 | 8 | let attachedEvents = {}; 9 | 10 | describe("", () => { 11 | beforeEach(() => { 12 | attachedEvents = {}; 13 | global.window.addEventListener = jest.fn((event, cb) => { 14 | attachedEvents[event] = cb; 15 | }); 16 | 17 | global.window.removeEventListener = jest.fn((event, cb) => { 18 | delete attachedEvents[event]; 19 | }); 20 | 21 | global.requestAnimationFrame = jest.fn(cb => { 22 | cb(); 23 | }); 24 | 25 | }); 26 | 27 | it("provide the window.innerWidth as width prop", () => { 28 | global.window.innerWidth = 456; 29 | const wrapper = shallow(); 30 | expect(wrapper.find(ScreenWidth).prop("width")).toBe(456); 31 | }); 32 | 33 | it("attaches and removes resize eventListener", () => { 34 | const wrapper = shallow(); 35 | expect(typeof attachedEvents.resize).toBe('function') 36 | wrapper.unmount(); 37 | expect(attachedEvents.resize).toBeUndefined() 38 | }); 39 | 40 | it("update the width on resize event", () => { 41 | global.window.innerWidth = 567; 42 | 43 | const wrapper = shallow(); 44 | expect(wrapper.find(ScreenWidth).prop("width")).toBe(567); 45 | 46 | global.window.innerWidth = 678; 47 | attachedEvents.resize(); 48 | wrapper.update(); 49 | 50 | expect(wrapper.find(ScreenWidth).prop("width")).toBe(678); 51 | 52 | wrapper.unmount(); 53 | expect(attachedEvents.resize).toBeUndefined() 54 | }); 55 | 56 | it("ignore resize event if still updating", () => { 57 | global.window.innerWidth = 567; 58 | 59 | const wrapper = shallow(); 60 | expect(wrapper.find(ScreenWidth).prop("width")).toBe(567); 61 | 62 | wrapper.instance().updating = true; 63 | 64 | global.window.innerWidth = 678; 65 | attachedEvents.resize(); 66 | wrapper.update(); 67 | 68 | expect(wrapper.find(ScreenWidth).prop("width")).toBe(567); 69 | }); 70 | 71 | it("should match snapshot", () => { 72 | const tree = renderer.create(); 73 | expect(tree).toMatchSnapshot(); 74 | }); 75 | }); 76 | -------------------------------------------------------------------------------- /src/components/Reminder.test.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { mount } from "enzyme"; 3 | import "jest-styled-components"; 4 | 5 | import Reminder from "./Reminder"; 6 | 7 | describe("", () => { 8 | it("user can add a reminder with button", () => { 9 | const wrapper = mount(); 10 | 11 | const input = wrapper.find("input"); 12 | input.simulate("change", { target: { value: "Write more tests" } }); 13 | 14 | expect(wrapper.state("value")).toBe("Write more tests"); 15 | 16 | const submit = wrapper.find("button").first(); 17 | submit.simulate("click"); 18 | 19 | expect(wrapper.state("reminders")).toContain("Write more tests"); 20 | }); 21 | 22 | it("user can add a reminder with ENTER key", () => { 23 | const wrapper = mount(); 24 | 25 | const input = wrapper.find("input"); 26 | input.simulate("change", { target: { value: "Write more tests" } }); 27 | 28 | expect(wrapper.state("value")).toBe("Write more tests"); 29 | 30 | input.simulate("keyPress", { key: "r" }); 31 | expect(wrapper.state("reminders")).not.toContain("Write more tests"); 32 | 33 | input.simulate("keyPress", { key: "Enter" }); 34 | expect(wrapper.state("reminders")).toContain("Write more tests"); 35 | }); 36 | 37 | it("does not allow empty reminders to be submited", () => { 38 | const wrapper = mount(); 39 | 40 | const initialLength = wrapper.find("ToDoItem").length; 41 | 42 | const submit = wrapper.find("button").first(); 43 | submit.simulate("click"); 44 | 45 | const nextLength = wrapper.find("ToDoItem").length; 46 | expect(initialLength).toBe(nextLength); 47 | }); 48 | 49 | it("does not allow duplicate reminders", () => { 50 | const wrapper = mount(); 51 | 52 | const addItem = () => { 53 | wrapper.setState({ value: "Some reminder" }); 54 | wrapper.instance().addReminder(); 55 | wrapper.update() 56 | }; 57 | 58 | addItem(); 59 | const firstLength = wrapper.find("ToDoItem").length; 60 | 61 | addItem(); 62 | const nextLength = wrapper.find("ToDoItem").length; 63 | 64 | expect(nextLength).toBe(firstLength); 65 | }); 66 | 67 | it("allows the user to remove a reminder", () => { 68 | const wrapper = mount(); 69 | 70 | expect(wrapper.find("ToDoItem")).toHaveLength(1); 71 | 72 | const FirstTodoItem = wrapper.find("ToDoItem"); 73 | const removeButton = FirstTodoItem.find("button"); 74 | removeButton.simulate("click"); 75 | 76 | expect(wrapper.find("ToDoItem")).toHaveLength(0); 77 | }); 78 | 79 | it("focus the input when the mouse enters", () => { 80 | const wrapper = mount(); 81 | 82 | const inputElement = wrapper.find("input"); 83 | const { input } = wrapper.instance(); 84 | 85 | jest.spyOn(input.current, "focus"); 86 | 87 | inputElement.simulate("mouseEnter"); 88 | 89 | expect(input.current.focus).toHaveBeenCalled(); 90 | }); 91 | }); 92 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | --------------------------------------------------------------------------------