scriptschat

import React from "react";
import { getDataTestAttribute } from "./helpers/attributeHelper";

function Workout({ name, target, group }) {
  return (
    <div {...getDataTestAttribute("workout-container")}>
      <h4 data-test-id="workout-name">Name: {name}</h4>
      <h6 data-test-id="workout-target">Target: {target}</h6>
      <h6 data-test-id="workout-group">Group: {group}</h6>

scriptschat

/**
 * Returns and object with `data-test-id` as key and attributeValue as
 * associated value to the key
 * @function
 * @name getDataTestAttribute
 *
 * @param {string} attributeValue
 * @returns {object}
 */
export function getDataTestAttribute(attributeValue) {

scriptschat

plugins: [ 
  [ "babel-plugin-jsx-remove-data-test-id", 
    { attributes: [
      "data-test-id", "selenium-id", "another-attr-to-be-stripped"
      ] 
    }
  ]
];

scriptschat

import { shallow } from "enzyme";
import React from "react";
import { findByTestAttribute } from "../test/utils/testUtils";
import workouts from "./data/worksouts.json";
import Workout from "./Workout";

function setup() {
  return shallow(<Workout {...workouts[0]} />);
}

scriptschat

/**
 * Returns node(s) for the given string attribute value of `data-test-id`
 * @function findByTestAttribute
 *
 * @name
 * @param {ShallowWrapper} wrapper - ShallowMounted Enzyme wrapper
 * @param {string} attributeValue - value of data-test-id attribute as string
 *                                  for searching the nodes
 * @returns {ShallowWrapper}
 */

scriptschat

import React from "react";

function Workout({ name, target, group }) {
  return (
    <div data-test-id="workout-container">
      <h4 data-test-id="workout-name">Name: {name}</h4>
      <h6 data-test-id="workout-target">Target: {target}</h6>
      <h6 data-test-id="workout-group">Group: {group}</h6>
    </div>
  );