React Testing Library: Нужен ли мне новый тест с новыми селекторами для каждого тестового ключа? - PullRequest
Новая
       20

React Testing Library: Нужен ли мне новый тест с новыми селекторами для каждого тестового ключа?

0 голосов
/ 11 февраля 2019

Я создаю приложение React с TDD, используя React Testing Library.

TLDR: Селекторы (например, toBeInTheDocument()), похоже, работают только один раз, после render.Это верно?

Я сделал приложение, используя CRA, и вот мои src/setupTests.js: 

// react-testing-library renders your components to document.body,
// this will ensure they're removed after each test.
import "react-testing-library/cleanup-after-each";
// this adds jest-dom's custom assertions
import "jest-dom/extend-expect";

Вот тесты, которые я написал: 

import { pluck } from "ramda";
import React from "react";
import { render } from "react-testing-library";
import ContactList from "../components/ContactList";
import { contacts } from "../fixtures";

describe("Contact List", () => {
  describe("given no contacts", () => {
    const { getByText } = render(<ContactList />);

    it("displays 'First Name' in the header", () => {
      const actual = getByText(/first name/i);
      expect(actual).toBeInTheDocument();
    });

    it("displays 'Last Name' in the header", () => {
      const actual = getByText(/last name/i);
      expect(actual).toBeInTheDocument();
    });

    it("displays 'No Contacts'", () => {
      const actual = getByText(/no contacts/i);
      expect(actual).toBeInTheDocument();
    });
  });

  describe("given a list of contacts", () => {
    const props = { contacts };

    const { getAllByTestId } = render(<ContactList {...props} />);

    it("displays the first name of all contacts", () => {
      const actual = pluck("textContent")(getAllByTestId("contact-first-name"));
      const expected = pluck("firstName")(contacts);
      expect(actual).toEqual(expected);
    });

    it("displays the last name of all contacts", () => {
      const actual = pluck("textContent")(getAllByTestId("contact-last-name"));
      const expected = pluck("lastName")(contacts);
      expect(actual).toEqual(expected);
    });
  });
});

И вот компонент, который я написал: 

import React from "react";
import PropTypes from "prop-types";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import withStyles from "@material-ui/core/styles/withStyles";
import strings from "../strings";

function ContactList({ contacts }) {
  const renderContact = ({ firstName = "N/A", lastName = "N/A", id }) => (
    <TableRow key={id}>
      <TableCell data-testid="contact-first-name">{firstName}</TableCell>
      <TableCell data-testid="contact-last-name">{lastName}</TableCell>
    </TableRow>
  );
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>{strings.firstName}</TableCell>
          <TableCell>{strings.lastName}</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {contacts.length > 0 ? (
          contacts.map(renderContact)
        ) : (
          <TableRow>
            <TableCell>{strings.noContacts}</TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

ContactList.propTypes = {
  classes: PropTypes.object.isRequired,
  contacts: PropTypes.arrayOf(
    PropTypes.shape({
      firstName: PropTypes.string.isRequired,
      lastName: PropTypes.string.isRequired
    })
  ).isRequired
};

ContactList.defaultProps = {
  contacts: []
};

const styles = {};

export default withStyles(styles)(ContactList);

Теперь, если я выполню эти тесты, только соответствующие первые два прохода каждого блока describe.

Если, например, я даюлюбой из it тестов на .only, которые он проходит.

Что происходит?Я не могу повторно использовать одну и ту же настройку теста для нескольких утверждений?Должен ли я звонить render для каждого it?

1 Ответ

0 голосов
/ 11 февраля 2019

Вы импортируете react-testing-library/cleanup-after-each, который удаляет визуализированные компоненты после каждого теста.Это правильный подход, однако вы должны визуализировать компонент в каждом it блоке.

...