. Part 1 — Link Part 2 — You’re here now. . Part 3 — Link . Part 4 — Link Add a todo Now let’s write a more useful feature test that will help us write corresponding unit tests and code to actually build the functionality we want: Let’s break it down in plain english. Create a string constant. Line 9 todoText Navigate to the page. Line 10 Find the element and enter the . Line 11 .todo-input todoText Click the element. Line 12 .todo-submit Find the element and assign its text value to the const. Line 13 .todo-text actual Assert that is equal to . Line 15 actual todoText Run the test and watch it fail. You should have 1 passing and 1 failing e2e test, if both are failing you have an issue with watch-mode and should run the e2e tests manually. I haven’t had time to properly debug this watch issue yet but go right ahead if you’re suitably motivated. Before we write the necessary code we’re going to write appropriate unit tests, and before that let’s fix the eslint errors we have in our e2e test. Add the below comment to the top of the file: e2etests/test.js /* global describe, it, browser */ If we get another eslint error in that file complaining about being a devDependency there is a known bug that has caused some debate over eslint rule merging. It’s not relevant to what we’re doing here but if you want to know more . chai start reading here The fix for the moment is to add another rule to our .eslintrc.js rules: {..."import/no-extraneous-dependencies": [2, { devDependencies: true }],}, This is what my looks like now: .eslintrc.js Let’s create the following folder structure and within that make a placeholder and leave it empty. We don’t want to write any code we don’t need, and we only need just enough code to make our tests pass. So let’s write a unit test in : src/components/addTodo/ index.js src/components/addTodo/test.js Import an component from the in the same folder as this test. Line 5 AddTodo index.js Shallow render the component to the const and expect that it exists. Line 9 — 10 component This unit test should fail because our returns nothing and therefore can not render. So let’s create our component: .../addTodo/index.js You should just leave your unit tests task running, if it isn’t then run _npm run test_ . Now our test should pass. Let’s write the next test, the minimum we have to do to inch closer to our end goal: The test should fail, let’s do the minimum to make it pass: At this point we can incorporate our component in to our main , this should help us pass the first error in our e2e test and show us what more we need to do: AddTodo App import the component. Line 2 AddTodo Add it to our . Line 7 App Add an appropriate heading. Line 6 Our e2e test should now show us that it was able to find the and enter some text in it, but it was not able to find the , so that’s exactly what we’re going to unit test and code next: .todo-input .todo-submit So let’s add the element that we need, knowing we’ll want it to be a button. Now I know what you’re thinking, , yes you’re right, a form! .todo-submit ‘An input, a submit button, what next — a form?’ Our e2e test can enter text in to the input and click on the submit button, however we need to hook up the functionality for it, but let’s write an appropriate unit test first: Add an exception to eslint for . Line 1 jest We assign the method as our mock. We use this because it comes bundled with our and gives us to make it easy to test that the function was called whilst not worrying about it’s actual implementation. Line 14 jest.fn() app nice helper methods We import the module from . Line 4 mount enzyme We actually our component so we have access to the to on the form submission. We’re also instantiating it with a prop which we’re giving our function. Line 15 mount event preventDefault() submitTodo submitMock translates to; Create an AddTodo component, it has a property called , when we instantiate the component pass in as that property. <AddTodo submitTodo={submitMock} /> submitTodo submitMock Later in the component itself we’ll write some validation for the prop so we ensure it’s a function. We expect that our starts off with zero calls, and once we submit our form it has one call, confirming the event was triggered. Line 17 — 19 submitTodo We’re about to make substantial changes to our component, but first let’s install the prop-types node package: AddTodo npm install --save-dev prop-types Let’s walk through the changes: We’ve changed the syntax of our component a little. Because we want to do more than just return some markup we’ve gone from the starting construction of: Line 4 — 7 const Something = () => (<p>Return something</p>); To: const Something = () => {const text = "Return something"; return (<p>{text}</p>);}; Then: We’re going to need a mutable variable to store our input text, so we do a . Line 5 let input; When we submit our form we want to send the input’s text so we tell to store a (reference) to this DOM element, that means that React will be able to track and use it in the component. And then assign the element to the mutable var. Line 19 — 21 React ref input There are better ways to do the above but I think it’s a nice opportunity to explore the functionality of a _ref_ , read more here . We tell the form what to do . Firstly actions, in this case reloading the page since that’s the default behaviour of form submission. Then call a function with the , in this case the text that is entered in to the input. Then set the back to an empty string so it clears the input text box. Line 10 — 14 onSubmit preventDefault submitTodo input.value input.value We pass the function in to our component as a property, aka . Read about . Line 4 submitTodo prop components and props We have to import the node package to give us prop validation and defaults when we don’t provide values for them. Line 2 prop-types We have to validate the in our component so we tell React it’s going to be a function and it’s required when we instantiate this component. Read about . Line 32 — 34 prop validating property types The test we just wrote passes but our changes to the component have broken two other tests. We’re now telling the component that it requires a prop when instantiated, it’s a function, it’s required, and we haven’t provided a default. AddTodo submitTodo // src/components/addTodo/index.js// Line 32 - 34 AddTodo.propTypes = {submitTodo: PropTypes.func.isRequired,}; Now in our tests we want each of the instances of the component to also have this prop, but this is going to be the first of a number of refactors so let’s optimise our setup a little, remembering DRY (Don’t repeat yourself). We create a mutable variable and assign it our mounted component test, and remove the assignment from each individual block. Line 8 — 17 component shallow beforeEach it(...) We still have to keep this assignment because we actually want to it when rendering for this test. Line 33 mount Add to the eslint exceptions. Line 1 beforeEach Now we have our App test to fix. It’s telling us exactly where the error has occurred, : App.js Line 7 For now we’re just passing an empty ES6 arrow function in to our ‘s prop. It will allow us to pass our component validation and have passing unit tests once again, although it won’t help our e2e test progress or actually add any functionality yet… but that’s what we’ll do next. Line 7 () => {} AddTodo submitTodo Git commit State of the repository What our App looks like now. Recap We’ve learned how to: Write a useful feature test. Unit test the creation of a React component. Validate property types. Up next Now we need to go beyond just creating UI and start setting up our event dispatchers via and event handlers via . actions reducers . Part 1 — Link Part 2 — You’re here now. . Part 3 — Link . Part 4 — Link
