{"id":7040,"date":"2019-05-11T21:21:46","date_gmt":"2019-05-11T21:21:46","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7040"},"modified":"2019-05-11T21:21:46","modified_gmt":"2019-05-11T21:21:46","slug":"unit-testing-and-react","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/unit-testing-and-react\/","title":{"rendered":"Unit testing and React"},"content":{"rendered":"

If you’ve created a React application using yarn, you’ll actually have the script for yarn test<\/em> as well as App.test.tsx for running unit tests against React code (i.e. capable of running against tsx\/jsx files etc.).<\/p>\n

Jest is used for unit testing by default, but if you need to install Jest yourself simple run<\/p>\n

\r\nyarn add --dev jest\r\n<\/pre>\n
The test script (within package.json) will execute react-scripts test<\/em> but if we want to add our own script you could add<\/p>\n
\r\n"jest": "jest --watch"\r\n<\/pre>\n
–watch will allow jest to monitor file changes and rerun tests automatically.<\/em><\/p>\n
Create a folder off of your src folder (it can be at any depth) named __tests__ and within this we’ll add a simple .js file (or .ts) named files, for example number.test.js<\/em> which we’ll create as a simple demonstration of writing tests and running the test runner. We should use either .test.<\/em> or .spec.<\/em> within the filename.<\/p>\n
Within my number.test.js file I have the following<\/p>\n
\r\nexport function getNumber() {\r\n    return 1234;\r\n}\r\n\r\ntest('Test 1', () => {\r\n    expect(getNumber()).toEqual(123);\r\n});\r\n\r\ntest('Test 2', () => {\r\n    expect(getNumber()).toEqual(1234);\r\n});\r\n<\/pre>\n
Note: we can use “it” instead of “test” in the above<\/em><\/p>\n
Obviously we’d normally not have the actually function we want to test within the test file, this is solely for simplicity of writing this post.<\/em><\/p>\n
As you can see, each test<\/em> comes with a string which is the name\/description of the test, followed by a function which is executed by the test runner. Obviously in the above code “Test 1” will fail and “Test 2” will pass, so let’s run the test runner and see.<\/p>\n
Like other test frameworks, we have functions to assert\/expect certain values within our tests.<\/p>\n
If you’ve added the script now run yarn jest<\/em> or use yarn test<\/em>. The Jest test runner will run and remain running, watching for file\/test changes. Select the “a” option to run all tests after executing the jest script.<\/p>\n
From the test runner (jest) you might wish to filter file name by regex, simply running tests against the __test__ folder.<\/p>\n","protected":false},"excerpt":{"rendered":"
If you’ve created a React application using yarn, you’ll actually have the script for yarn test as well as App.test.tsx for running unit tests against React code (i.e. capable of running against tsx\/jsx files etc.). Jest is used for unit testing by default, but if you need to install Jest yourself simple run yarn add […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[245,243],"tags":[],"class_list":["post-7040","post","type-post","status-publish","format-standard","hentry","category-jest","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7040"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7040\/revisions"}],"predecessor-version":[{"id":7044,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7040\/revisions\/7044"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}