{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/ftw/how-to-test-ftw/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"How to test FTW","slug":"how-to-test-ftw","updated":"2021-10-05T00:00:00.000Z","category":"ftw-testing-error-handling","ingress":"This guide describes how to use the test setup in Flex Template for Web (FTW).","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Flex Template for Web uses the\n"},{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Jest testing framework"}]},{"type":"text","value":" as its test runner. The\nsetup FTW uses is based on how testing is implemented in\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"create-react-app"}]},{"type":"text","value":". For reference, see the testing section in the\n"},{"type":"element","tagName":"a","properties":{"href":"https://create-react-app.dev/docs/running-tests","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"create-react-app"}]},{"type":"text","value":" documentation."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"running-tests","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#running-tests","ariaLabel":"running tests permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Running tests"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To start the test watcher that automatically updates when files change,\nrun"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"yarn"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin","class-name"]},"children":[{"type":"text","value":"test"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to run the tests once and not start the watcher, run"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","assign-left","variable"]},"children":[{"type":"text","value":"CI"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"true "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"yarn"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin","class-name"]},"children":[{"type":"text","value":"test"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that this also runs the linter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: In some environments, alternative test watcher doesn't always\nwork and it can die unexpectedly. If that happens to you, you might\nwant to install\n"},{"type":"element","tagName":"a","properties":{"href":"https://facebook.github.io/watchman/docs/install/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Watchman"}]},{"type":"text","value":". Read\nmore about\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/facebook/create-react-app/issues/871","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"this issue"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"extending-tests","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#extending-tests","ariaLabel":"extending tests permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Extending tests"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Most tests included in Flex Template for Web are\n"},{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/docs/snapshot-testing","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"snapshot tests:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"“A typical snapshot test case renders a UI component, takes a\nsnapshot, then compares it to a reference snapshot file stored\nalongside the test. The test will fail if the two snapshots do not\nmatch: either the change is unexpected, or the reference snapshot\nneeds to be updated to the new version of the UI component.”"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Failing snapshots can be updated through the\n"},{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/docs/snapshot-testing#interactive-snapshot-mode","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Jest watch mode"}]},{"type":"text","value":".\nEven though most tests in Flex Template for Web are UI-focused,\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/master/server/api-util/currency.test.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"some tests"}]},{"type":"text","value":"\nare written with unit-testing in mind."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Test files can be found next to the code they are testing and can be\nidentified by a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".test.js"}]},{"type":"text","value":" suffix. Snapshots are located in a nested\nfolder "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"__snapshots__"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"├── EditListingAvailabilityForm.example.js\n├── EditListingAvailabilityForm.js\n├── EditListingAvailabilityForm.module.css\n├── EditListingAvailabilityForm.test.js\n├── ManageAvailabilityCalendar.js\n├── ManageAvailabilityCalendar.module.css\n└── __snapshots__\n    └── EditListingAvailabilityForm.test.js.snap\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Flex Template for Web does not include full test coverage; the templates\nare intended to be extended and customized which quickly renders the\ndefault tests obsolete. The default tests are there to provide a good\nstarting point for writing tests when you start extending the Flex\nTemplate for Web."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"jest","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#jest","ariaLabel":"jest permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Jest"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Jest"}]},{"type":"text","value":" is a JavaScript test runner that runs tests\nin a Node environment. The test runner accesses the DOM using the\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/jsdom/jsdom","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"jsdom"}]}]},{"type":"text","value":" library. As the tests are run\nin a Node environment, they are not exact portrayals of real browser\nbehaviour. This provides good iteration speed and a well-adjusted\nbalance between accuracy, simplicity, and performance."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Jest provides detailed documentation on their testing framework. If you\nare interested in extending the in-built tests provided with Flex\nTemplate for Web, the following guides can provide additional insight:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/docs/en/getting-started","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Getting Started"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/docs/en/tutorial-react","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Tutorial - React"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/docs/en/tutorial-async","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Tutorial - Async"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/blog/2016/07/27/jest-14.html","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Snapshot Testing"}]},{"type":"text","value":"\nblog post"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://jestjs.io/docs/en/api","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"API Reference"}]},{"type":"text","value":" lists the global\nenvironment with the available functions and the assertion matchers"}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"headings":[{"value":"Running tests","depth":2},{"value":"Extending tests","depth":2},{"value":"Jest","depth":2}]}},"pageContext":{"slug":"how-to-test-ftw","category":"ftw-testing-error-handling"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}