1. Initial Application Structure<\/h2>\n
We create our initial application structure using the create-react-app tool. To get started execute the below command to create the skeleton of our ReactJS Application.<\/p>\n
>npx create-react-app unit-testing .\n<\/pre>\nThis command creates our application unit-testing and its structure should resemble the screenshot below<\/p>\n
\nProject Structure<\/figcaption><\/figure>\n<\/div>\n 2. Writing our First Test<\/h2>\n
With create-react-app one advantage is that our application comes preconfigured with Jest testing framework. Yes, we do not need to perform any additional configuration. We can start writing our tests from the get go. So, let us get started writing our first test. But before we do that we need some functionality to test. I have coded a rudimentary calculator app for the purposes of this test. It has the below two components, we do not need to go into the implementation details of these for now. Instead focus on testing these components.<\/p>\n
Calculator.js<\/em><\/span><\/p>\n
import React, { useState } from 'react';\nimport Keypad from \".\/Keypad\";\n\nfunction Calculator() {\n const [result, setResult] = useState(0);\n const [operator, setOperator] = useState(\"\");\n const [operand2, setOperand2] = useState(0);\n const [operand1, setOperand1] = useState(0);\n const handleChange = ({ target }) => {\n setResult(target.value);\n }\n const handleEqualsClick = ({ target }) => {\n if (operand1 && operand2 && operator) {\n switch (operator) {\n case \"\/\": setResult(operand1 \/ operand2);\n setOperand1(operand1 \/ operand2);\n break;\n case \"X\": setResult(operand1 * operand2);\n setOperand1(operand1 * operand2);\n break;\n case \"+\": setResult(operand1 + operand2);\n setOperand1(operand1 + operand2);\n break;\n case \"-\": setResult(operand1 - operand2);\n setOperand1(operand1 - operand2);\n break;\n default:\n break;\n }\n setOperand2(0);\n setOperator(\"\");\n }\n }\n const handleClearClick = ({ target }) => {\n setResult(0);\n setOperator(\"\");\n setOperand2(0);\n setOperand1(0);\n }\n const handleKeypadClick = ({ target }) => {\n if (!operator) {\n setOperand1(+(operand1 + \"\" + target.value));\n setResult(+(operand1 + \"\" + target.value));\n } else {\n setOperand2(+(operand2 + \"\" + target.value));\n setResult(+(operand2 + \"\" + target.value));\n }\n }\n const handleOperatorClick = ({ target }) => {\n if (operator) {\n handleEqualsClick({ target });\n }\n setOperator(target.value);\n setOperand2(0);\n }\n return <div className=\"container-fluid\">\n <div className=\"row\">\n <input type=\"text\" readOnly onChange={handleChange} value={result} \/>\n <\/div>\n <div className=\"row\">\n <Keypad onEqualsClick={handleEqualsClick}\n onClearClick={handleClearClick}\n onKeyClick={handleKeypadClick}\n onOperatorClick={handleOperatorClick} \/>\n <\/div>\n <\/div>;\n}\nexport default Calculator;\n<\/pre>\nKeypad.js<\/em><\/span>
<\/div> <\/div><\/p>\nimport React from 'react';\n\nfunction Keypad(props) {\n\n return <div className=\"container\">\n <div className=\"row\">\n <button className=\"btn btn-info m-1\" value=\"1\" onClick={props.onKeyClick}>1<\/button>\n <button className=\"btn btn-info m-1\" value=\"2\" onClick={props.onKeyClick}>2<\/button>\n <button className=\"btn btn-info m-1\" value=\"3\" onClick={props.onKeyClick}>3<\/button>\n <button className=\"btn btn-info m-1\" value=\"\/\" onClick={props.onOperatorClick}>\/<\/button>\n <\/div>\n <div className=\"row\">\n <button className=\"btn btn-info m-1\" value=\"4\" onClick={props.onKeyClick}>4<\/button>\n <button className=\"btn btn-info m-1\" value=\"5\" onClick={props.onKeyClick}>5<\/button>\n <button className=\"btn btn-info m-1\" value=\"6\" onClick={props.onKeyClick}>6<\/button>\n <button className=\"btn btn-info m-1\" value=\"X\" onClick={props.onOperatorClick}>X<\/button>\n <\/div>\n <div className=\"row\">\n <button className=\"btn btn-info m-1\" value=\"7\" onClick={props.onKeyClick}>7<\/button>\n <button className=\"btn btn-info m-1\" value=\"8\" onClick={props.onKeyClick}>8<\/button>\n <button className=\"btn btn-info m-1\" value=\"9\" onClick={props.onKeyClick}>9<\/button>\n <button className=\"btn btn-info m-1\" value=\"-\" onClick={props.onOperatorClick}>-<\/button>\n <\/div>\n <div className=\"row\">\n <button className=\"btn btn-info m-1\" value=\"Clear\" onClick={props.onClearClick}>C<\/button>\n <button className=\"btn btn-info m-1\" value=\"0\" onClick={props.onKeyClick}>0<\/button>\n <button className=\"btn btn-info m-1\" value=\"=\" onClick={props.onEqualsClick}>=<\/button>\n <button className=\"btn btn-info m-1\" value=\"+\" onClick={props.onOperatorClick}>+<\/button>\n <\/div>\n <\/div>;\n}\nexport default Keypad;\n<\/pre>\nWe write tests in files with the same name as the component we are testing but ending in test.js. These are then picked up by Jest when we test and the tests written inside are executed. Let us create two files to test each of our two components above. Our first test is to check if the above components render without crashing. The test for this looks like below:<\/p>\n
Keypad.test.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Keypad from '.\/Keypad';\n\nit('renders without crashing', () => {\n const div = document.createElement('div');\n ReactDOM.render(<Keypad \/>, div);\n ReactDOM.unmountComponentAtNode(div);\n});\n<\/pre>\nCalculator.test.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Calculator from '.\/Calculator';\n\nit('renders without crashing', () => {\n const div = document.createElement('div');\n ReactDOM.render(<Calculator \/>, div);\n ReactDOM.unmountComponentAtNode(div);\n});\n<\/pre>\nEach test begins with call to it function with the first parameter describing the expectations as in “it renders without crashing…”. This convention is followed with each test we write for all components. The second parameter is a callback with our test forming the body of the callback. In the above tests we render our components to the DOM using ReactDOM.<\/p>\n
Now to run these tests we run the following command from the terminal at the root of the project.<\/p>\n
>npm test\n<\/pre>\nThis runs the test and the results are displayed like below:<\/p>\n
\nProject Output<\/figcaption><\/figure>\n<\/div>\n We explore more advanced scenarios in the following sections<\/p>\n
3. Snapshot Testing<\/h2>\n
The concept of snapshot testing works simply by comparing a reference snapshot of the UI with the current UI generated by the test. In case there is an anomaly, it could point to an issue leading to inadvertent change in the UI of the component. But it could also be due to intentional and deliberate change in the layout. In latter we need to update the stored snapshots. We take a look at both cases below as we test our Container Calculator Component. Point to note is that the snapshots are not images rather tree of nodes in our rendered Component serialized to a file as JSON.<\/p>\n
We will write a test to test the UI of our calculator. For reference this is what our UI looks like right now.<\/p>\n
\nUI Layout<\/figcaption><\/figure>\n<\/div>\n We write a test to validate that new changes do not make unintentional changes to the layout of our Calculator. We add the following code to our Calculator.test.js file.<\/p>\n
it('renders correctly', () => {\n const Calc = renderer.create(<Calculator \/>).toJSON();\n expect(Calc).toMatchSnapshot();\n});\n<\/pre>\nLet us run this test using the npm test command. This the first time we have run a snapshot test and this causes a snapshot to be generated and save to a folder __snapshots___ as a file named Calculator.test.js.snap. Now when we run the test again we should see the below output as all the tests pass.<\/p>\n
\nSnapshot Test Passes<\/figcaption><\/figure>\n<\/div>\n To test out the snapshot test let us make a change to the layout to simulate an inadvertent change or bug. And then run the tests again to see the output below:<\/p>\n
\nSnapshot Test Fails<\/figcaption><\/figure>\n<\/div>\n Such tests are useful to ensure that inadvertent or side effects leading to broken UI are caught early on. Next we take a look at how we can use Jest to make asserts and mock artifacts.<\/p>\n
4. Mocking<\/h2>\n
One of the essential parts of unit testing is to isolate or insulate the unit being tested. So that test results are not affected by external events or the environment. Like availability of server side APIs or external resources or other child or parent components. To enable such isolation all testing frameworks provide capabilities to mock artifacts. So that our tests focus on testing one unit at a time. <\/p>\n
For example here when we test the keypad component which is a child of Calculator component and renders buttons. We would like to isolate the Keypad component from both so that we can test the behavior of Keypad component alone. As can be seen from code we pass in event callbacks from Calculator to Keypad and we forward the callbacks to the button’s onclick handler based on its value in Keypad. Let us mock these callbacks and simulate button clicks to and then assert that the Calculator passed callbacks are invoked with proper arguments. Our test file would now look like below:<\/p>\n
Keypad.test.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Keypad from '.\/Keypad';\nimport Enzyme, { shallow } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\n\nEnzyme.configure({ adapter: new Adapter() });\n\n\/\/ Mocked Callbacks\nconst handleKeypadClick = jest.fn(({ target }) => target.value);\nconst handleOperatorClick = jest.fn(({ target }) => target.value);\nconst handleEqualsClick = jest.fn(({ target }) => target.value);\nconst handleClearClick = jest.fn(({ target }) => target.value);\n\nit('renders without crashing', () => {\n const div = document.createElement('div');\n ReactDOM.render(<Keypad \/>, div);\n ReactDOM.unmountComponentAtNode(div);\n});\n\nit('should call handleKeypadClick', () => {\n const keypad = shallow(<Keypad onEqualsClick={handleEqualsClick}\n onClearClick={handleClearClick}\n onKeyClick={handleKeypadClick}\n onOperatorClick={handleOperatorClick} \/>);\n\n keypad.find({ value: '2' }).simulate('click', { target: { value: 2 } });\n\n expect(handleKeypadClick).toBeCalledWith({ target: { value: 2 } });\n\n});\nit('should call handleEqualsClick', () => {\n const keypad = shallow(<Keypad onEqualsClick={handleEqualsClick}\n onClearClick={handleClearClick}\n onKeyClick={handleKeypadClick}\n onOperatorClick={handleOperatorClick} \/>);\n\n keypad.find({ value: '=' }).simulate('click', { target: { value: '=' } });\n expect(handleEqualsClick).toBeCalledWith({ target: { value: '=' } })\n});\n\nit('should call handleOperatorClick', () => {\n const keypad = shallow(<Keypad onEqualsClick={handleEqualsClick}\n onClearClick={handleClearClick}\n onKeyClick={handleKeypadClick}\n onOperatorClick={handleOperatorClick} \/>);\n\n keypad.find({ value: '+' }).simulate('click', { target: { value: '+' } });\n expect(handleOperatorClick).toBeCalledWith({ target: { value: '+' } })\n});\n\nit('should call handleClearClick', () => {\n const keypad = shallow(<Keypad onEqualsClick={handleEqualsClick}\n onClearClick={handleClearClick}\n onKeyClick={handleKeypadClick}\n onOperatorClick={handleOperatorClick} \/>);\n\n keypad.find({ value: 'Clear' }).simulate('click', { target: { value: 'Clear' } });\n expect(handleClearClick).toBeCalledWith({ target: { value: 'Clear' } })\n});\n<\/pre>\n5. Download the Source Code<\/h2>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/ProjectStructureUnitTesting.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/FirstRunOfUnitTests.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/UILayoutCalculator.jpg\")
![\"\"](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/FirstSnapshotTest.jpg\")
![\"\"](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/SnapshotTestFailed.jpg\")