Как проверить стилизованные компоненты условно и дочерние элементы?

Question

Я новичок в модульном тестировании и провел около 20-30 часов в документах, статьях и видеороликах YT, но до сих пор не могу понять, как этого добиться. В основном я хочу проверить 3 вещи здесь:

1. Убедитесь, что этот компонент отображает 3 компонента
2. Проверка условного моделирования
3. Проверка события нажатия

Пока, во-первых, если я попытаюсь сделать:

import { shallow } from "enzyme";
import React from "react";
import ButtonsComponent, { SchedButton } from "./ButtonsComponent";

it("renders three <MyButton /> components", () => {
  const wrapper = shallow(<ButtonsComponent />);
  expect(wrapper.find(MyButton)).to.have.lengthOf(3);
});

Я получаю следующую ошибку: TypeError: Enzyme :: Selector ожидает строку, объект или конструктор компонента

И у меня нет никакой хорошей идеи, как проверить две другие вещи, я видел несколько примеров, но я не понимаю, как адаптировать их к моей конкретной ситуации, так как они, кажется, не тестируют точно что я пытаюсь сделать.

Это упрощенная версия моего компонента:

import React from "react";
import styled from "styled-components";

const MyButton = styled.button`
  background: ${props =>
    props.color ? theme.palette.secondary.dark : "#e6e6e6"};
  color: ${props => (props.color ? "white" : "#737373")};
`;

const ButtonsComponent = ({ currentState, updateState }) => {
  const handleClick = event => {
    updateState(event.target.value);
  };

  return (
    <div>
      <MyButton
        value="Button 1"
        onClick={handleClick}
        color={currentState === "Button 1" ? "#1fbd45" : ""}
      >
        Button 1
      </MyButton>
      <MyButton
        value="Button 2"
        onClick={handleClick}
        color={currentState === "Button 2" ? "#1fbd45" : ""}
      >
        Button 2
      </MyButton>

      <MyButton
        value="Button 3"
        onClick={handleClick}
        color={!currentState || currentState === "Button 3" ? "#1fbd45" : ""}
      >
        Button 3
      </MyButton>
    </div>
  );
};

export default ButtonsComponent;

Любая помощь очень ценится, объяснение ELI5 было бы намного больше!

Answer 1

Я постараюсь ответить на ваши вопросы как можно более подробно.

Итак, у вас есть 3 вопроса:

1.Убедитесь, что этот компонент отображает 3 компонента

Ваш тест был почти верным.Ошибка была в том, что вы делали: wrapper.find(MyButton) вместо wrapper.find('MyButton').Чтобы сделать wrapper.find(MyButton), сначала нужно импортировать компонент MyButton, поэтому должно работать что-то вроде этого:

import { shallow } from "enzyme";
import React from "react";
import ButtonsComponent, { MyButton } from "./ButtonsComponent";

it("renders three <MyButton /> components", () => {
  const wrapper = shallow(<ButtonsComponent />);
  expect(wrapper.find(MyButton)).to.have.lengthOf(3);
});

Но вы не можете сделать это в своем коде, потому что вы не экспортируете компонент MyButton.Мой совет относительно этого вопроса - создать файл для компонента MyButton и другой файл для компонента ButtonsComponent.В целом, гораздо более понятно иметь один компонент на файл, и модульное тестирование также становится более понятным.Тогда вы сможете сделать что-то вроде этого:

import { shallow } from "enzyme";
import React from "react";
import ButtonsComponent from "./ButtonsComponent";
import MyButton from "./MyButton"

it("renders three <MyButton /> components", () => {
  const wrapper = shallow(<ButtonsComponent />);
  expect(wrapper.find(MyButton)).to.have.lengthOf(3);
});

2.Протестируйте условный стиль

Я не знаю, какой движок тестирования (mocha, jest и т. Д.) Вы используете, но если бы мне пришлось выбирать один из них для тестирования приложения React, я бы выбрал Jest (этопросто дело вкуса хотя).Я предлагаю jest, потому что в нем есть все, что вам нужно, например, шпионы, мэтчеры и т. Д., А также есть несколько дополнительных пакетов, которые облегчат вашу жизнь, как в этом случае.

Итак, для тестирования ваших стилевых компонентовс jest вам понадобятся два дополнительных пакета react-test-renderer (которые в основном преобразуют компоненты React в объект js) и jest-styled-components (что даст вам дополнительный сопоставитель с именем toHaveStyleRule, который очень поможет вам в достижении вашей цели).

После установки этих двух пакетов сначала импортируйте их:

import renderer from "react-test-renderer";
import "jest-styled-components";

Затем вы преобразуете свой компонент в объект js:

const tree =
  renderer
  .create(<MyButton color="red">Test</MyButton>)
  .toJSON();

И, наконец,Вы спросите стиль, который вы ожидаете применить со свойствами, указанными для вашего компонента:

expect(tree).toHaveStyleRule("background-color", "red");

3.Проверка события щелчка

Чтобы проверить событие щелчка, вам понадобится шпион.Если вы используете Jest, у вас уже есть эта функция, если вы используете Mocha, я думаю, вам, вероятно, понадобится дополнительный пакет, такой как sinon или аналогичный.

Шпион позволит вам отслеживать, что происходит с вашей функцией updateState, поэтому, когда вы тестируете событие click, вы передаете шпионскую функцию в качестве значения свойства updateState.Таким образом, когда вы имитируете нажатие на вашу кнопку, ваш шпион будет вызван, и тогда вы сможете задать ему вопрос, например, «вас уже звали?», В результате вы сможете проверить, что при щелчке вывызовите функцию updateState с ожидаемыми параметрами.

В по этой ссылке вы найдете свой пример (с небольшими изменениями) работающим и с тестами для всех вещей, которые вы хотели проверить (выполнитене обращайте внимания на место, где зависимости появляются в файле package.json, многие из них должны отображаться как dev devdencies, но по какой-то причине, если я это сделаю, это не работает, вероятно, я что-то не так делаю в этом инструменте).

Надеюсь, этот ответ поможет вам.