SET UP<\/h3>\n\n- Setting up React application with CRA<\/li>\n<\/ul>\n
create-react-app testing\r\ncd testing\r\nnpm start<\/pre>\n
\n- Setting up Enzyme<\/li>\n<\/ul>\n
npm install --save enzyme enzyme-adapter-react-16<\/pre>\nPut your attention to version of React which you are using. Here we have 16, but Enzyme has adapters for all versions. Here you will find details: Enzyme installation guide<\/a>.<\/p>\nTo finish configuration, we have to create a new file called setupTests.js <\/strong>under src <\/strong>directory, so we can use Enzyme in any of test files. Name is very important here.<\/p>\nsetupTests.js<\/p>\n
import Enzyme from 'enzyme';\r\nimport Adapter from 'enzyme-adapter-react-16';\r\n\r\nEnzyme.configure({adapter: new Adapter() });<\/pre>\nThis is it! Installation is behind us.<\/p>\n
FUNCTIONS IN ENZYME<\/h3>\n
We will use the functions below. They will create instances of our components and return back objects which we can use to write tests<\/p>\n
\n- Static <\/strong>– renders the given component and returns plain HTML<\/li>\n
- Shallow<\/strong> – most basic version, it renders only given component without children. Perfect for unit tests<\/li>\n
- Full DOM<\/strong> which renders the components with all children, here we are able to interact with components<\/li>\n<\/ul>\n
TEST STRUCTURE![\"\"](\"https:\/\/www.visionmate.se\/wp-content\/uploads\/2019\/01\/0-246x300.png\")
<\/h3>\n
Our tests will be placed in a new directory __tests__<\/strong><\/p>\nIt is a good habit to organize tests in this way. Jest will run all files located inside.<\/p>\n
To make it easy to recognize which test pertain to which file, we are describing them in the same way as tested file: .test.js<\/strong> at the end.<\/p>\nOur tests will always be in schema:<\/p>\n
it ('test description', function which contain logic of our test);<\/pre>\nFunction inside our test can contain few expectations, where we can describe the value which we expect to see.<\/p>\n
FINALLY TEST!<\/strong><\/h3>\nBelow is the content of two simple components:<\/p>\n
List.js<\/p>\n
import React, { Component } from 'react';\r\n\r\n\r\nclass List extends Component {\r\n render() {\r\n return (\r\n <form>\r\n <h3>Add new element<\/h3>\r\n <textarea \/>\r\n <div>\r\n <button>Save<\/button>\r\n <\/div>\r\n <\/form>\r\n );\r\n }\r\n}\r\n\r\nexport default List;<\/pre>\nApp.js<\/p>\n
import React from 'react';\r\nimport List from '.\/List'\r\n\r\nexport default()=>{\r\n return (\r\n <div><List \/><\/div>\r\n );\r\n};<\/pre>\nLet’s simply test rendering List.js component. We will use shallow function as we don’t need to render its children. If component is working correctly test will pass, otherwise it will fail.<\/p>\n
List.test.js<\/p>\n
import React from 'react';\r\nimport { shallow } from 'enzyme'; \r\nimport List from '..\/List';\r\n\r\nit('renders without crashing', () => {\r\n shallow(<List \/>);\r\n});\r\n<\/pre>\nNow check if the test will pass by typing in terminal<\/p>\n
npm test<\/pre>\n![\"\"](\"https:\/\/www.visionmate.se\/wp-content\/uploads\/2019\/01\/1-300x98.png\")
<\/p>\n
Great! Our fist test works. To end testing mode just press ctrl+c.<\/p>\n
Now we will check the components instance.We want to check if List.js component is located in App.js.<\/p>\n
App.test.js<\/p>\n
import React from 'react';\r\nimport { shallow } from 'enzyme'; \r\nimport App from '..\/App';\r\nimport List from '..\/List';\r\n\r\nit('shows the list', () => {\r\n const wrapped = shallow(<App \/>);\r\n expect(wrapped.find(List).length).toEqual(1);\r\n});\r\n<\/pre>\nconst wrapped<\/strong> means that the object which we will have from shallow(<App \/>) is a wrapped version of App component.<\/p>\nAnd both tests passed!<\/p>\n
![\"\"](\"https:\/\/www.visionmate.se\/wp-content\/uploads\/2019\/01\/2-300x110.png\")
<\/p>\n
In similar way as above we can check if our component contains button and input area:<\/p>\n
List.test.js<\/p>\n
import React from 'react';\r\nimport { mount } from 'enzyme'; \r\nimport List from '..\/List';\r\n\r\nit('contains button and text area', () => {\r\n const wrapped = mount(<List \/>);\r\n expect(wrapped.find('textarea').length).toEqual(1);\r\n expect(wrapped.find('button').length).toEqual(1);\r\n});<\/pre>\n
create-react-app testing\r\ncd testing\r\nnpm start<\/pre>\n
- \n
- Setting up Enzyme<\/li>\n<\/ul>\n
npm install --save enzyme enzyme-adapter-react-16<\/pre>\n
Put your attention to version of React which you are using. Here we have 16, but Enzyme has adapters for all versions. Here you will find details: Enzyme installation guide<\/a>.<\/p>\n
To finish configuration, we have to create a new file called setupTests.js <\/strong>under src <\/strong>directory, so we can use Enzyme in any of test files. Name is very important here.<\/p>\n
setupTests.js<\/p>\n
import Enzyme from 'enzyme';\r\nimport Adapter from 'enzyme-adapter-react-16';\r\n\r\nEnzyme.configure({adapter: new Adapter() });<\/pre>\nThis is it! Installation is behind us.<\/p>\n
FUNCTIONS IN ENZYME<\/h3>\n
We will use the functions below. They will create instances of our components and return back objects which we can use to write tests<\/p>\n
- \n
- Static <\/strong>– renders the given component and returns plain HTML<\/li>\n
- Shallow<\/strong> – most basic version, it renders only given component without children. Perfect for unit tests<\/li>\n
- Full DOM<\/strong> which renders the components with all children, here we are able to interact with components<\/li>\n<\/ul>\n
TEST STRUCTURE
<\/h3>\nOur tests will be placed in a new directory __tests__<\/strong><\/p>\n
It is a good habit to organize tests in this way. Jest will run all files located inside.<\/p>\n
To make it easy to recognize which test pertain to which file, we are describing them in the same way as tested file: .test.js<\/strong> at the end.<\/p>\n
Our tests will always be in schema:<\/p>\n
it ('test description', function which contain logic of our test);<\/pre>\nFunction inside our test can contain few expectations, where we can describe the value which we expect to see.<\/p>\n
FINALLY TEST!<\/strong><\/h3>\n
Below is the content of two simple components:<\/p>\n
List.js<\/p>\n
import React, { Component } from 'react';\r\n\r\n\r\nclass List extends Component {\r\n render() {\r\n return (\r\n <form>\r\n <h3>Add new element<\/h3>\r\n <textarea \/>\r\n <div>\r\n <button>Save<\/button>\r\n <\/div>\r\n <\/form>\r\n );\r\n }\r\n}\r\n\r\nexport default List;<\/pre>\nApp.js<\/p>\n
import React from 'react';\r\nimport List from '.\/List'\r\n\r\nexport default()=>{\r\n return (\r\n <div><List \/><\/div>\r\n );\r\n};<\/pre>\nLet’s simply test rendering List.js component. We will use shallow function as we don’t need to render its children. If component is working correctly test will pass, otherwise it will fail.<\/p>\n
List.test.js<\/p>\n
import React from 'react';\r\nimport { shallow } from 'enzyme'; \r\nimport List from '..\/List';\r\n\r\nit('renders without crashing', () => {\r\n shallow(<List \/>);\r\n});\r\n<\/pre>\nNow check if the test will pass by typing in terminal<\/p>\n
npm test<\/pre>\n
<\/p>\nGreat! Our fist test works. To end testing mode just press ctrl+c.<\/p>\n
Now we will check the components instance.We want to check if List.js component is located in App.js.<\/p>\n
App.test.js<\/p>\n
import React from 'react';\r\nimport { shallow } from 'enzyme'; \r\nimport App from '..\/App';\r\nimport List from '..\/List';\r\n\r\nit('shows the list', () => {\r\n const wrapped = shallow(<App \/>);\r\n expect(wrapped.find(List).length).toEqual(1);\r\n});\r\n<\/pre>\nconst wrapped<\/strong> means that the object which we will have from shallow(<App \/>) is a wrapped version of App component.<\/p>\n
And both tests passed!<\/p>\n
<\/p>\nIn similar way as above we can check if our component contains button and input area:<\/p>\n
List.test.js<\/p>\n
import React from 'react';\r\nimport { mount } from 'enzyme'; \r\nimport List from '..\/List';\r\n\r\nit('contains button and text area', () => {\r\n const wrapped = mount(<List \/>);\r\n expect(wrapped.find('textarea').length).toEqual(1);\r\n expect(wrapped.find('button').length).toEqual(1);\r\n});<\/pre>\n - Shallow<\/strong> – most basic version, it renders only given component without children. Perfect for unit tests<\/li>\n
- Static <\/strong>– renders the given component and returns plain HTML<\/li>\n
![\"\"](\"https:\/\/www.visionmate.se\/wp-content\/uploads\/2019\/01\/3-300x164.png\")
<\/p>\n