ReactJS

Using Cypress with Cucumber in a React Application

Published Feb 10, 2023

Updated Feb 16, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Introduction

We are going to be learning how to integrate Cypress with Cucumber in a React application. Cypress is the premier end-to-end testing platform to allow you to test user interactions, and end-to-end flows in your application.

What is Cucumber?

Cucumber creates a layer of abstraction that allows for better communication between business and technical folks, and facilitates the use of Behavior Driven Development (BDD). One of the additional benefits is that it essentially creates documentation, which stays up to date and is easy to share. Cucumber is built to support Behavior Drive Development (BDD). If you are unfamiliar with Behavior Driven Development, you can read Cucumber’s guide on it here: https://cucumber.io/docs/bdd/

Learn more about Cucumber in general here: https://cucumber.io/docs/guides/overview/

What is Gherkin?

In the simplest terms, Gherkin is a set of grammar rules that structure plain text for Cucumber to understand and process.

Learn more here: https://cucumber.io/docs/gherkin/

Setup

Steps

- Clone a React app to test against. Here is a link to a photo viewer and search app which we will be using:

https://github.com/Yog9/SnapShot

You will need to clone the app and get it running before we can move on to next steps. Below is a screenshot of the working app:

- Add Cypress as a dev dependency within your application. Install Cypress npm i cypress --save-dev. Once you have completed this step, you should see "cypress": "^10.11.0", or something similar in the devDependencies section of your package.json file.

- Open and run Cypress to install it using the binary. You do this by typing the command npx cypress open in your terminal. If it's your first time running this command within your application, Cypress will prompt you to install some example tests and other helper files, and guide you through a basic configuration necessary for Cypress to operate within your application.

- Add the cypress-cucumber-preprocessor package to your project. This package was originally maintained by BrainFamily, but was recently taken over by Badeball. You can find it here:

https://www.npmjs.com/package/@badeball/cypress-cucumber-preprocessor

Use the command npm install --save-dev @badeball/cypress-cucumber-preprocessor

You can find the quick start guide here:

https://github.com/badeball/cypress-cucumber-preprocessor/blob/a2702f5ce247c96269a0432358ed919b596a4dbb/docs/quick-start.md

- Add @bahmutov/cypress-esbuild-preprocessor esbuild https://github.com/bahmutov/cypress-esbuild-preprocessor. Use the command npm i -D @bahmutov/cypress-esbuild-preprocessor esbuild. This should result in "esbuild": "^0.15.13" as well as "@bahmutov/cypress-esbuild-preprocessor": "^2.1.5" becoming part of the devDependencies in your package.json file.

Add cypress/webpack-preprocessor to your project. Use the command npm i --save-dev @cypress/webpack-preprocessor to add this package. The devDependencies section of your package.json file should now include, "@cypress/webpack-preprocessor": "^5.15.3" if done correctly.

- Configure cypress.config.ts file. Configure specPattern with "**/*.feature" and setupNodeEvents. Here is my file:

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const addCucumberPreprocessorPlugin =
  require("@badeball/cypress-cucumber-preprocessor").addCucumberPreprocessorPlugin;
const createEsbuildPlugin =
  require("@badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;

module.exports = defineConfig({
  e2e: {
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });

      on("file:preprocessor", bundler);
      await addCucumberPreprocessorPlugin(on, config);

      return config;
    },
    specPattern: "cypress/e2e/features/*.feature",
    baseUrl: "http://localhost:3000/SnapShot#/SnapScout/",
    chromeWebSecurity: false,
  },
});

Additionally, you will want to generate a cypress-cucumber-preprocessorrc.json file at the root level of your project in order to handle some additional configuration settings. My file contents are below:

{
  "json": {
    "enabled": false,
    "output": "jsonlogs/log.json",
    "formatter": "cucumber-json-formatter.exe"
  },
  "messages": {
    "enabled": false,
    "output": "jsonlogs/messages.ndjson"
  },
  "html": {
    "enabled": false
  },
  "stepDefinitions": [
    "[filepath]/**/*.{js,ts}",
    "[filepath].{js,ts}",
    "cypress/e2e/step_definitions/*.{js,ts}",
    "[filepath]\\***.{js,ts}",
    "[filepath].{js,ts}",
    "cypress\\e2e\\step_definitions\\*.{js,ts}"
  ]
}

Organize your files. There are multiple ways to organize your feature files and step definition files. For the purposes of this tutorial, we will place our feature files in a cypress > e2e > features directory, and our step definition files in a cypress > e2e > step_definitions directory.

Let's Write Some Tests!!

Let's create a simple feature file with some basic scenarios and test steps for this application. Here is a start in app.feature!

Feature: Snapshot website test scenarios
  Scenario: visiting the home page - successful search
    Given I visit the home page
    Then the header should be visible
    Then I click in the text input
    Then I type birds into the search input and press search button
    Then I should see Birds Images in header
    Then I click the Food button and see Food header and 24 images

import { Given, Then } from "@badeball/cypress-cucumber-preprocessor";

Given("I visit the home page", () => {
  cy.visit("/");
});

Then("the header should be visible", () => {
  cy.get("h1").should("be.visible");
});

Then("I click in the text input", () => {
  cy.get("input").click();
});

Then("I type birds into the search input and press search button", () => {
  cy.get("input").type("birds");
  cy.get(".search-button").click();
});

Then("I should see Birds Images in header", () => {
  cy.get(":nth-child(24) > img").should("be.visible");
});

Then("I click the Food button and see Food header and 24 images", () => {
  cy.get(":nth-child(4) > a").click({ force: true });
  cy.get(":nth-child(24) > img").should("be.visible");
});

Summary

As you can see, setting up Cypress with Cucumber is a fairly straight-forward process. There are incredible benefits to using Cucumber with Cypress, particularly related to facilitating communication between non-technical and technical members of a development team, as well as creating ongoing project documentation, and an easy-to-understand guide for what your application or feature is doing.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Ken Slachta

Why is My React Reducer Called Twice and What the Heck is a Pure Function?

Why is My React Reducer Called Twice and What the Heck is a Pure Function? In a recent project, we encountered an interesting issue: our React reducer was dispatching twice, producing incorrect values, such as incrementing a number in increments of two. We hopped on a pairing session and started debugging. Eventually, we got to the root of the problem and learned the importance of pure functions in functional programming. This article will explain why our reducer was being dispatched twice, what pure functions are, and how React's strict mode helped us identify a bug in our code. The Issue We noticed that our useReducer hook was causing the reducer function to be called twice for every action dispatched. Initially, we were confused about this behavior and thought it might be a bug in React. Additionally, we had one of the dispatches inside a useEffect, which caused it to be called twice due to React strict mode, effectively firing the reducer four times and further complicating our debugging process. However, we knew that React's strict mode caused useEffect to be called twice, so it didn't take very long to realize that the issue was not with React but with how we had implemented our reducer function. React Strict Mode React's strict mode is a tool for highlighting potential problems in an application. It intentionally double-invokes specific lifecycle methods and hooks (like useReducer and useEffect) to help developers identify side effects. This behavior exposed our issue, as we had reducers that were not pure functions. What is a Pure Function? A pure function is a function that: - Is deterministic: Given the same input, always returns the same output. - Does Not Have Side Effects: Does not alter any external state or have observable interactions with the outside world. In the context of a reducer, this means the function should not: - Modify its arguments - Perform any I/O operations (like network requests or logging) - Generate random numbers - Depend on any external state Pure functions are predictable and testable. They help prevent bugs and make code easier to reason about. In the context of React, pure functions are essential for reducers because they ensure that the state transitions are predictable and consistent. The Root Cause: Impure Reducers Our reducers were not pure functions. They were altering external state and had side effects, which caused inconsistent behavior when React's strict mode double-invoked them. This led to unexpected results and made debugging more difficult. The Solution: Make Reducers Pure To resolve this issue, we refactored our reducers to ensure they were pure functions. Here's an extended example of how we transformed an impure reducer into a pure one in a more complex scenario involving a task management application. Let's start with the initial state and action types: ` And here's the impure reducer similar to what we had initially: ` This reducer is impure because it directly modifies the state object, which is a side effect. To make it pure, we must create a new state object for every action and return it without modifying the original state. Here's the refactored pure reducer: ` Key Changes: - Direct State Modification: In the impure reducer, the state is directly modified (e.g., state.tasks.push(action.payload)). This causes side effects and violates the principles of pure functions. - Side Effects: The impure reducer included side effects such as logging and direct state changes. The pure reducer eliminates these side effects, ensuring consistent and predictable behavior. I've created an interactive example to demonstrate the difference between impure and pure reducers in a React application. Despite the RESET_TASKS action being implemented similarly in both reducers, you'll notice that the impure reducer does not reset the tasks correctly. This problem happens because the impure reducer directly modifies the state, leading to unexpected behavior. Check out the embedded StackBlitz example below: Conclusion Our experience with the reducer dispatching twice was a valuable lesson in the importance of pure functions in React. Thanks to React's strict mode, we identified and fixed impure reducers, leading to more predictable and maintainable code. If you encounter similar issues, ensure your reducers are pure functions and leverage React strict mode to catch potential problems early in development. By embracing functional programming principles, you can write cleaner, more reliable code that is easier to debug and maintain....

Jun 14, 2024

3 mins

React

Communication Between Client Components in Next.js

Communication Between Client Components in Next.js In recent years, Next.js has become one of the most popular React frameworks for building server-rendered applications. With the introduction of the App Router in Next.js 13, the framework has taken a major leap forward by embracing a new approach to building web applications: the concept of server components and client components. This separation of concerns allows developers to strategically decide which parts of their application should be rendered on the server and which are then hydrated in the browser for interactivity. The Challenge: Communicating Between Client Components While server components offer numerous benefits, they also introduce a new challenge: how can client components within different boundaries communicate with each other? For instance, let's consider a scenario where you have a button (a client component) and a separate client component that displays the number of times the button has been clicked. In a regular React application, this would typically be accomplished by lifting the state to a common ancestor component, allowing the button to update the state, which is then passed down to the counter display component. However, the traditional approach may not be as straightforward in a Next.js application that heavily relies on server components, with client components scattered across the page. This blog post will explore three ways to facilitate communication between client components in Next.js, depending on where you want to store the state. Lifting State to a Common Client Component One approach to communicating between client components is to lift the state to a common client component. This could be a React context provider, a state management system like Zustand, or any other solution that allows you to share state across components. The key aspect is that this wrapper component should be higher up in the tree (perhaps even in the layout) and accept server components as children. Next.js allows you to interleave client and server components as much as you want, as long as server components are passed to client components as props or as component children. Here's how this approach might look in practice. First of all, we'd create a wrapper client component that holds the state: ` This wrapper component can be included in the layout: ` Any server components can be rendered within the layout, potentially nesting them several levels deep. Finally, we'd create two client components, one for the button and one for the counter display: ` ` The entire client and server component tree is rendered on the server, and the client components are then hydrated in the browser and initialized. From then on, the communication between the client components works just like in any regular React application. Check out the page using this pattern in the embedded Stackblitz window below: Using Query Params for State Management Another approach is to use query params instead of a wrapper client component and store the state in the URL. In this scenario, you have two client components: the button and the counter display. The counter value (the state) is stored in a query param, such as counterValue. The client components can read the current counter value using the useSearchParams hook. Once read, the useRouter hook can update the query param, effectively updating the counter value. However, there's one gotcha to this approach. If a route is statically rendered, calling useSearchParams will cause the client component tree up to the closest Suspense boundary to be client-side rendered. Next.js recommends wrapping the client component that uses useSearchParams in a boundary. Here's an example of how this approach might look. The button reads the current counter value and updates it on click by using the router's replace function: ` The counter display component is relatively simple, only reading the counter value: ` And here is the page that is a server component, hosting both of the above client components: ` Feel free to check out the above page in the embedded Stackblitz below: Storing State on the Server The third approach is to store the state on the server. In this case, the counter display component accepts the counter value as a prop, where the counter value is passed by a parent server component that reads the counter value from the database. The button component, when clicked, calls a server action that updates the counter value and calls revalidatePath() so that the counter value is refreshed, and consequently, the counter display component is re-rendered. It's worth noting that in this approach, unless you need some interactivity in the counter display component, it doesn't need to be a client component – it can be purely server-rendered. However, if both components need to be client components, here's an example of how this approach might look. First, we'll implement a server action that updates the counter value. We won't get into the mechanics of updating it, which in a real app would require a call to the database or an external API - so we're only commenting that part. After that, we revalidate the path so that the Next.js caches are purged, and the counter value is retrieved again in server components that read it. ` The button is a simple client component that calls the above server action when clicked. ` The counter display component reads the counter value from the parent: ` While the parent is a server component that reads the counter value from the database or an external API. ` This pattern can be seen in the embedded Stackblitz below: Conclusion Next.js is a powerful framework that offers various choices for implementing communication patterns between client components. Whether you lift state to a common client component, use query params for state management, or store the state on the server, Next.js provides all the tools you need to add a communication path between two separate client component boundaries. We hope this blog post has been useful in demonstrating how to facilitate communication between client components in Next.js. Check out other Next.js blog posts we've written for more insights and best practices. You can also view the entire codebase for the above snippets on StackBlitz....

Jun 21, 2024

5 mins

NextJSReact

Effective Communication Strategies Within The Software Development Organization

Have you ever been in a situation where you thought you were communicating effectively, only to realize later that the other person misunderstood what you were saying? Have you ever communicated with someone only to hear that they felt you provided way too much detail, or that you didn’t provide nearly enough detail? Communication in the workplace is how ideas, updates, directions, etc are transferred to others. Each party in a software development organization has differing needs and expectations when it comes to workplace communication. By learning to tailor your communication to meet the needs of each stakeholder, you can become a more effective communicator and achieve greater success within your organization. The requirements of various parties that you interact with in the workplace can vary wildly depending on several factors. Your awareness of these individualized communication preferences and how you can give each party what they want and need will impact your effectiveness in your daily activities, your perception by others, and even your upward mobility within the organization. That's the power of communication, and why it's so important to master effective communication strategies in the workplace! In this article, we'll explore the different types of stakeholders in a software development organization, the communication strategies that work best for each group, and how effective communication can help you advance your career in the industry. We'll start by discussing the difference between “communication” and “effective communication”, before diving into the different types of stakeholders in a software development organization. Then, we'll explore the communication strategies that work best for each group, and provide actionable tips for improving your communication skills. Communication vs. Effective Communication When it comes to communication, it's important to remember that the intended message is only effective if it's received and understood by the recipient, regardless of their background or level of familiarity with the topic. Effective communication is about sharing thoughts, ideas, opinions, knowledge, and data in a way that ensures that the message is received and understood by the recipient. With effective communication, the sender and receiver leave the exchange feeling satisfied. There is a shared understanding of what was intended to be transmitted by the sender. Stakeholder Types In any organization, you have many different types of parties involved in a software project. Let's group the parties involved in software development into three categories for the sake of clarity: - Development Team - This consists of individual contributors, project managers, scrum masters, QA testers, UX designers, UI designers, architects, etc. - Product Team - The product team is made up of a diverse group of individuals, including product owners, business analysts, architects, and more. - Executive Team - CTO, CEO, etc. Each of these parties requires a different type of communication, a different level, and has different needs from your interactions to allow you to provide value from what you are saying and to for them view you as an effective communicator. Let’s talk a bit about what each of these parties needs, and how you can interact with them in the most meaningful way possible. Development Team This is the most detailed version of the interaction. This group needs to be communicated with on the level of individual tickets and the details of those tickets. When interacting with the development team, it's important to focus on the nitty-gritty details of each task, ensuring that everything is sorted through meticulously. With this group, we will sort through specific implementation details. An example of interaction with someone from this group might look like this, “I am currently working on ticket 473, and trying to get the checkbox to behave correctly during testing. I have no blockers currently.” Product Team This group will be communicated with at the level of features and larger increments of work such as project milestones. This group is interested in chunks of a project, milestones, progress on the overall initiative, etc. An example of interaction with someone from this group might look like this, “The team is wrapping up development of the new Project X User Interface and will be moving to the implementation of the functionality next”. Executive Team This group is interested in the conversation at the highest levels of abstraction. Generally, they will be more concerned with things at the overall project level. When updating the executive team, it's important to provide high-level updates that summarize progress and focus on next steps. For example, you might say, 'We're making great progress on Showcase X and are on track to complete it soon. Next, we'll be shifting our attention to project Y.' Types of Communication What are some of the types of communication? It’s a great question. When you begin to study various communication styles, you will read about different personality types, and how those personalities interact with the world around them. You might hear things like aggressive, passive-aggressive, passive, and assertive communication styles. While understanding these can help you communicate effectively, we will focus on how different roles in a company require different levels of detail and specificity in their interactions. Your Natural Communication Style We all have a natural way that we prefer to communicate. Some are very direct and assertive. We might tend to be very to the point, with no filler, no fluff. Others might naturally tend to be more verbose, to fill in lots of details and context and information. Some naturally meet somewhere in the middle on the spectrum of detail vs direct higher-level type of communication. There is no right or wrong answer, but you must be aware of your natural tendencies in conversation, and know how to use those effectively, or tailor your communication style to a specific situation or audience. Benefits of Tailored Communication What are the benefits of tailored communication? The primary benefits of tailoring your communication to different stakeholders are that you can provide each person with what they want and need in a way that resonates with them. For instance, I once had to adapt my communication style when working with a highly detail-oriented developer who preferred a more granular level of communication. This eases the amount of effort required by the other party to understand you, and allows them to be more effective in taking your message forward. It increases the perception of your effectiveness, and credibility in their eyes as well. If people know that you are someone who can communicate with multiple parties with varying interests and needs, and do so effectively, you will be trusted with more responsibility, and be given more opportunities. Using Effective Communication To Advance Your Career As you can see, developing effective communication skills is a powerful way to advance your career in the software development industry. How have you seen effective communication impact your work? People who are seen as effective communicators have staying power in an organization. They are viewed as competent and necessary. They are given positions of authority and trusted to get things done. I remember that, when I was just starting out in software development, I struggled to communicate effectively with stakeholders at different levels of the organization. But over time, I learned the value of tailoring my communication to each person's unique needs, and it has paid off in my career in countless ways. Basic Strategies For Improving Your Communication Know your audience When preparing for a presentation or conversation, it's essential to consider your audience and tailor your communication style to their needs. What are some strategies you use to ensure your message is received and understood? Write notes in advance, when possible Draw an outline or even the bulk of what you need to deliver before the time comes. Even if you don’t ultimately use these notes directly, preparing them will help you to distill your thoughts and clarify your message, as well as review that they have the appropriate amount of detail for the intended audience. Practice your delivery Though you will not always be giving a speech, talking through what you plan to say will help you to see gaps, smooth the flow, and make sure that you are comfortable with the material you will be presenting or communicating. Conclusion In this article, we learned about the importance of effective communication, strategies for improving your communication, and the direct and indirect positive impacts these improvements can have on your effectiveness and value in the organization. We explored various strategies and approaches to improve communication. Development in this area can yield amazing results for you as you make the investment to improve your skills. We hope you enjoyed this article, and found it helpful. If you have any questions please feel free to join the discussions going on at starter.dev or on our Discord....

Apr 26, 2023

6 mins

GeneralSoftware Engineer

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....

Nov 8, 2024

3 mins

AccessibilityCSSPlaywright

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Using Cypress with Cucumber in a React Application

Introduction

What is Cucumber?

What is Gherkin?

Setup

Steps

Let's Write Some Tests!!

Summary

Ken Slachta

You might also like

Why is My React Reducer Called Twice and What the Heck is a Pure Function?

Communication Between Client Components in Next.js

Effective Communication Strategies Within The Software Development Organization

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Let's innovate together!

You might also like

Why is My React Reducer Called Twice and What the Heck is a Pure Function?

Communication Between Client Components in Next.js

Effective Communication Strategies Within The Software Development Organization

Understanding the Difference Between `:focus` and `:focus-visible` in CSS