Vue.js Live Conference

Vue.js Live 2024

Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.

Testings are mandatory and unit tests are the foundation for building a good testing system for our project. But for front end projects which involve components, how many unit tests are considered efficient and not overkill? Should we use additional libraries like Testing Library or Vue Test Utils with Vitest to test a component, when we can perform the same with just Playwright? Whether a component test using an E2E framework like Playwright is really a kill for? Let's find out in my talk.

We May Not Need Component Testing

Maya Shavin

TestJS Summit

TestJS Summit 2023

This Talk discusses the challenges of testing in React and React Native applications, particularly with regards to barcode scanning. It explores the violation of separation of concerns in React and proposes the use of the HumbleObject model to simplify testing and improve code cleanliness. The MVP model is also introduced as a way to separate UI state and logic from the component. The importance of following patterns, standardization, and teaching principles is emphasized, along with the benefits of using custom hooks to share business logic. The potential of AI tools in code refactoring is mentioned as well.

In this talk, we explore the divisive world of testing, where developers often find themselves torn between writing no tests and striving for 100% test coverage. Learn how to navigate these polarizing positions and adopt a more nuanced strategy that makes testing efficient and effective.We'll dive into the concept of 'Humble Views,' where we minimize untestable objects by extracting logic from UI elements into test-friendly parts of the codebase. This approach simplifies testing, focusing on business logic instead of UI complexities. Discover how the Model-View-Presenter (MVP) architecture helps achieve this, with presenters serving as a logical layer for testing and hooks aiding in separating logic from UI components.Throughout the talk, we'll discuss the trade-offs of this approach, the role of End-to-End (E2E) tests, and how to strike the perfect balance between too much and too little testing. Join us as we delve into the art of creating 'Humble Views,' ensuring that our React Native apps are scalable, maintainable, and effectively tested!

The Art of ‘Humble Views’: Testing React Native Apps the Smart Way

Mo Khazali

TestJS Summit 2021

This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.

Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!<ul><li>But how do we do that?</li><li>Are the "unit" and "integration" terminology serves us right?</li><li>Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?</li></ul>In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Test Effective Development

Shai Reznik

The Workshop introduced composables in Vue 3 as an alternative to mixins and the options API. The transition from options API to composables involves looking for reactive state, transformations, and mutations. Composables provide a centralized place for managing state, making components more reusable. The use of testing and mocking allows for thorough testing of composables and their behavior. Lastly, the workshop explored the use of the Intersection Observer API and its integration with Vue 3 composables.

Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components.This shift in perspective opens the possibility for tackling common scenarios in a new and creative way. In this workshop, you will learn how to solve typical problems every Vue developer faces, using composables: <ul><li>- Data store;</li><li>- Component cross-communication;</li><li>- Utility functions (DOM, API, etc);</li><li>And more.</li></ul>

Learn To Use Composables: The Swiss Army Knife Of Vue Developers

Juan Andrés Núñez Charro

The Talk discusses the evolution of test automation from the original test automation pyramid to the testing pyramid. It explores modern approaches to UI component testing, including isolations and testing with a fake DOM. The importance of testing in a real browser and the emergence of tools like Selenium, WebDriver.io, Puppeteer, Cypress, and PlayWrite for browser automation are highlighted. The advantages of out-of-process browser automation are explained, along with the use of Storybook and Playwright for testing components. The distinction between end-to-end testing and component testing is also mentioned.

Yes, we do need to test our UI components but... If this rings a bell, and especially if your application has advanced UI functionality, this talk is for you.In this talk, we will cover what are the factors that need to be tested in UI components. We will challenge the testing pyramid when it comes to UI Components testing, and review the different tools that we have nowadays for making UI component testing complete Zen.

Zen and the Art of UI Components Testing

Tally Barak

This Talk is about a developer's first open source contribution to the Testing Library, exploring how it works and its importance in testing. It discusses the challenges of testing in a Node environment and the use of getByRole query to find elements. The Talk also highlights the complexities of implicit roles and the need for specific attributes to filter elements. It emphasizes the importance of verifying visibility and accessibility when querying elements and the process of test clean up.

Testing is an essential part of software development, but it can be a tricky and time-consuming process. The popular testing-library package is a widely used tool that helps developers write reliable and maintainable frontend tests based on a behavior driven approach, but many users are not fully aware of how it works. In this talk, I, as one of the maintainers of the package, give an in-depth look into testing-library. You will learn how testing-library is designed to encourage good testing practices and how it can help you write more maintainable tests.

Testing Library: Everybody Uses It, But Nobody Understands It

Matan Borenkraout

MSW is an API mocking library that simplifies the process of intercepting requests and mocking responses. It leverages standard JavaScript APIs like the ServiceWorker API and the Fetch API. MSW has seen significant adoption, with over 90,000 projects on GitHub and 2.5 million weekly downloads on npm. The recent release of Node.js 18 has allowed for refactoring and simplification in MSW. MSW supports TypeScript and can be used for contract testing with tools like PACT I-O.

It's been half a decade since Mock Service Worker (MSW) has changed the way developers approach and think of API mocking in JavaScript. With all its innovation, I felt we could do more. I spent the last year making that happen. I can't wait to share it with all of you!

Mock Service Worker 2.0

Artem Zakharchenko

This Talk explores the challenges of choosing and learning testing frameworks, emphasizing the importance of planning, automation, and prioritizing unit testing. The VTEST framework is introduced as a fast and stable option for unit testing JavaScript and TypeScript code, with a focus on logic and mocking external dependencies. The Talk also covers testing React hooks, integration testing with TestingLibraryReact, component testing, and achieving code coverage. Best practices include performing accessibility tests, planning tests before coding, and using data test IDs for stability.

Testing is important. Proper unit tests can eliminate the chance for bugs to appear. But which testing framework will be suitable? Let’s explore how we can develop a reliable and efficient strategy for component development and testing with Vitest

Component Testing With Vitest

TestJS Summit 2022

Today's Talk introduces VEST, a form validation framework that combines the syntax and style of Unitest with form validation. The lack of structure in form validation is a major problem, leading to messy and difficult-to-maintain code. Testing forms and form validation can be challenging, especially with complex logic. VEST offers a solution by allowing the creation of a form validation suite using unit tests. It provides features like multiple validations per field, async validations, and memoization, with support for any JavaScript environment and full TypeScript support.

In the talk I will explain the pains and problems of form validation Then I will explain the mental model of unit tests, and compare it to how we think about form validations.I will introduce vest with a bit of live coding showing its unit testing syntax.

Using Tests for What?!

Evyatar Alush

This talk explores unit testing in Angular applications, covering topics such as testing front-end applications, specifics of testing Angular, best practices, and educational resources. It discusses the anatomy of a unit test in both Jasmine and Jest, the setup and initial tests in Angular, testing user interaction and event handlers, testing rendered output and change detection, and unit testing parent components with child components. It also highlights best practices like using test doubles, testing components with dependency injection, and considerations for unit testing. Code coverage is emphasized as a metric that doesn't guarantee bug-free code.

Angular offers many things out of the box, including various testing-related functionalities. This presentation will demonstrate how we can build on Angular's solid unit testing fundamentals and apply certain patterns that make testing easier. Topics covered include: test doubles, testing module pattern, harnesses, "recipes" on how to test some common cases, and more!

Unit Testing Angular Applications

Filip Voska

React Advanced

React Advanced 2022

This workshop on React Native Testing Library covers various topics including testing components, user interaction events, mocking, and testing API calls. The speaker emphasizes the importance of testing the contract of a component and provides practical examples and exercises. Just module mocking is recommended as a portable solution for mocking modules. The workshop encourages exploring different testing strategies and provides additional resources for further learning.

Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain. But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on <a href="https://docs.expo.dev/get-started/create-a-new-app/">https://docs.expo.dev/get-started/create-a-new-app/</a>

Introduction to React Native Testing Library

Josh Justice

Mutation testing is a method to improve test quality by inserting bugs into code to test if tests can detect them. Mutation-testing frameworks like Striker.js allow for various mutations to be performed. Mutation testing provides a mutation score that is a better tool than code coverage for measuring test quality. It can help identify missing tests or bugs in existing tests. Stryker is recommended for JavaScript and TypeScript mutation testing.

<div>Have you ever wondered: "who's testing the tests"? Of course, tests are only valuable if they catch bugs, but how would one validate that? Well, let me tell you about mutation testing! Mutation testing is the act of testing your test verifying that they catch bugs. Of course, you can do this manually inserting bugs and running the tests, but a mutation testing framework can do this for you! Join me and learn the basics of mutation testing and how to use StrykerJS, the mutation testing framework for JavaScript or TypeScript.At the end of this talk, you'll be the one that is testing your tests, and it won't even cost you much time!</div> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Who is Testing the Tests?

Simon de Lang

This Talk provides ways to catch accessibility defects during testing, including adding accessibility testing to a website for Studio Ghibli using React, NX, Jazz, JazzX, Cypress, and CypressX. The importance of unitizing components and conducting end-to-end testing with Cypress and CypressX is emphasized to ensure accessibility. The process of setting up CypressX testing is explained, highlighting the use of typings and the CypressX support file. These tools make it easier for developers to avoid accessibility bugs during development.

For developers, it is better to catch any a11y defects during unit and e2e testings. This talk is going to show how to automate a11y testing using jest and cypress. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Catch a11y Defects During Unit and E2E Testing

Emily Xiong

This Talk explores the pain points and best practices in software testing, emphasizing the importance of simplicity and comprehensibility in test design. It discusses techniques such as the three-part rule for test titles, the triple-A pattern for test structure, and the use of clear and descriptive names in tests. The Talk also highlights the traps of testing implementation details and using fixed waiting times. The speaker encourages teamwork and learning from experience to improve testing practices.

It’s a trap” - a call or feeling we all might be familiar with, not only when it comes to Star Wars. It’s signalizing a sudden moment of noticing imminent danger. This situation is an excellent allegory for an unpleasant realization in testing. Imagine having the best intentions when it comes to testing but still ending up with tests failing to deliver you any value at all? Tests who are feeling like a pain to deal with? When writing frontend tests, there are lots of pitfalls on the way. In sum, they can lead to lousy maintainability, slow execution time, and - in the worst-case - tests you cannot trust. But it doesn’t have to be that way. In this session, I will talk about developers’ common mistakes (including mine), at least from my experience. And, of course, on how to avoid them. Testing doesn’t need to be painful, after all. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

It's a (Testing) Trap! - Common Testing Pitfalls and How to Solve Them

Ramona Schwering

TestJS Summit - January, 2021

The Talk discusses testing hooks in a React application. The speaker starts by showing an untested React application and begins testing with a simple placeholder test. The importance of refactoring and testing custom hooks is emphasized, with the recommendation to use the React hooks library and achieve full test coverage. Unit testing React components may not be valuable, as the complexity lies in the hook code. Instead, end-to-end testing with tools like Cypress is recommended.

The talk will be presented as a refactoring story - will start from the messy untestable component, cover it with a brittle smoke test, and then show how to move all our react component logic into a custom hook and test this hook. Will present patterns to test things like - useState, effects, and Apollo. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#unit testing