JestTesting.pdf

Transcript

1. FRONT-END TESTING WITH JEST Presented by: Brent Mitchell and Kristi Byrnes expect(FrontEndTesting).toBe(true)
2. SUMMARY • Fundamentals of Testing • Story Time • Automated Testing • Types of Tests • What is Jest? • Assertion Library • Test Runner • Writing Meaningful Tests • Testing with Vue • Brand 360 • Show and Tell demo! • Coverage Report
3. ImagIne thIs sad tale …..
4. WHAT ARE SOME REASONS FRONT END TESTS ARE IMPORTANT? • Confidence! Catch bugs before production! • Save time. • Think about possible issues & bugs. • Breaks up complex dependencies. • Integrated into our build work flow.
5. TYPES OF TESTS Integration Tests* End-To-End Tests Unit Tests* • Smallest piece of code that can be logically isolated in a system • Typically a simple method or function • Fastest • How the units work together • Testing with dependencies, HTTP requests/third parties • Slower than Unit Tests *Indicates that when we test with Jest we are writing Unit and Integration Tests • Tests the user’s journey through the application • Can be a script which executes a certain series of steps • Slowest test
6. Assertion Library Defines the expectations of what we want to test
7. Test Runner Executes your tests and summarize the results, where the tests actually run
9. ✔ Jest is both a fast test runner and a rich assertion library built in to one ✔ Easy to use, you invoke Jest from the command line ✔ Standard and advanced features: mocking dependencies, snapshots, etc. ✔ Works well with most Single Page Application frameworks out there JEST!
10. Basic Matchers Main Matchers https://jestjs.io/docs/getting-started
11. MEANINGFUL TESTING Component Input Output Component Contract
13. e2e Snapshot Unit • Runs Fast (Unit) • Doesn’t break often • Easy to read & understand • Catch BUGS • Provides good coverage
14. Testing with Vue Brand 360 Demo
15. For additional resources - https://kb.uwm.com/display/UIUX/UI+Testing expect(FrontEndTesting).toBe(true) The End