How are you getting this test to work?

karlkras commented 2 years ago

Hi Paul. So on this section: you are showing this code:

import React, { Component } from "react";

class Counter extends Component {
  render(): JSX.Element {
    return (
      <div>
        <label htmlFor="counter">Count</label>
        <span id="counter" role="counter">
          1
        </span>
      </div>
    );
  }
}

export default Counter;

and this test:

import React from "react";
import { render } from "@testing-library/react";
import Counter from "../components/Counter/Counter";

test("renders a label and counter", () => {
  const { getByLabelText, getByRole } = render(<Counter />);
  const label = getByLabelText("Count");
  expect(label).toBeInTheDocument();
  const counter = getByRole("counter");
  expect(counter).toBeInTheDocument();
});

as passing. However I'm getting this error:


Found a label with the text of: Count, however the element associated with this label (<span />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <span />, you can use aria-label or aria-labelledby instead.

<body>
  <div>
    <div>
      <label
        for="counter"
      >
        Count
      </label>
      <span
        id="counter"
        role="counter"
      >
        1
      </span>
    </div>
  </div>
</body>
TestingLibraryElementError: Found a label with the text of: Count, however the element associated with this label (<span />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <span />, you can use aria-label or aria-labelledby instead.

<body>
  <div>
    <div>
      <label
        for="counter"
      >
        Count
      </label>
      <span
        id="counter"
        role="counter"
      >
        1
      </span>
    </div>
  </div>
</body>

how are you getting it to pass?

pauleveritt commented 2 years ago

I think I'm showing the previous code in the recorded video but I updated it to not use in the text. I need to go back and re-record the video, sorry!

karlkras commented 2 years ago

so after some further futzing, here's the "eslint suggested" version of that counter component:

import React, { Component } from "react";

export type CounterProps = { label?: string };
export type CounterState = { count: number };

export class Counter extends Component<CounterProps, CounterState> {
  constructor(props: CounterProps) {
    super(props);

    this.state = { count: 0 };
  }

  render(): JSX.Element {
    const { label = "Count" } = this.props;
    const { count } = this.state;
    return (
      <div>
        <span title="Count Label">{label}</span>
        <span id="counter" title="Current Count">
          {count}
        </span>
      </div>
    );
  }
}

pauleveritt commented 2 years ago

As you probably see in the next section, when I'm modeling state, I tried to lead towards readonly enforcement.

maartenba commented 1 year ago

We're archiving the current repository - if the issue is still relevant, would you mind opening it on https://github.com/JetBrains/guide ?

Many thanks, and sorry for any inconvenience.

(this is an automated message)

JetBrains / jetbrains_guide

How are you getting this test to work? #207