React + Jest：如何测试私有样式的组件？

Question

当status 属性为=== "error" 时，我有一个Charities 组件显示文本“对不起...”：

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

const Notification = styled.p`
  text-align: center;
  padding: 10px;
  font-family: Raleway;
  display: ${props => (props.hide ? "none" : "block")};
`;

const ErrorNotification = styled(Notification)`
  background: #e3c7c4;
`;

export const Charities = ({
  ..., status
}) => (
  <Container>
    <ErrorNotification hide={status !== "error"}>
      Sorry, something was wrong with your payment. Please try again.
    </ErrorNotification>
    ...
  </Container>
);

export default Charities;

我试图用这样的玩笑来测试这个：

import React from "react";
import { mount, shallow } from "enzyme";
import { Charities } from "./index";

describe("Charities", () => {
  let props;
  let mountedCharities;
  const charities = () => {
    if (!mountedCharities) {
      mountedCharities = mount(<Charities {...props} />);
    }
    return mountedCharities;
  };

  beforeEach(() => {
    props = {
      status: undefined,
      ...
    };
    mountedCharities = undefined;
  });

  describe("when status is pending", () => {
    beforeEach(() => {
      props.status = "pending";
    });

    it("doesn't render error", () => {
      expect(charities().text()).not.toMatch(/Sorry/); // <---------- FAILS
    });
  });
});

我的测试失败了：

Expected value not to match:
  /Sorry/
Received:
  "Sorry, something was wrong with your payment. Please try again.Congratulations! You have successfully made a donation."

它似乎在加载样式组件的子组件，即使它不满足条件。我将如何测试这个？

Answer 1

您正在使用属性 hide 映射到“显示：无”，如果为 true，这仍然会呈现组件，尽管您应该执行以下操作：

{ status === "error" && 
  <ErrorNotification >
     Sorry, something was wrong with your payment. Please try again.
  </ErrorNotification>
}

Answer 2

您的代码按预期工作，只是 styled() 通过将类名放在元素上来控制样式。

在单元测试中，ErrorNotification 仍然存在，但它上面有 css 类，可以在最终呈现的 HTML 中为它提供display: none。

为了使您的组件更容易进行单元测试，我建议在 Charities 中进行隐藏，如下所示：

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

const Notification = styled.p`
  text-align: center;
  padding: 10px;
  font-family: Raleway;
  display: block;
`;

const ErrorNotification = styled(Notification)`
  background: #e3c7c4;
`;

export const Charities = ({
  ..., status
}) => (
  <Container>
    {status !== "error" ? null : (
      <ErrorNotification>
        Sorry, something was wrong with your payment. Please try again.
      </ErrorNotification>
    )}
    ...
  </Container>
);

export default Charities;

这样，如果 Charities 的 props 中的状态是除 'error' 之外的任何内容，则根本不会呈现 ErrorNotification。