如何测试样式化的组件？答案

【问题标题】：How can I test styled components?如何测试样式化的组件？
【发布时间】：2017-11-02 14:10:37
【问题描述】：

我需要测试的是LoginWrapper 总是在Login 组件中呈现。我按如下方式测试它，但由于找不到LoginWrapper，它没有通过。

  import React from 'react';
  import Login from '../components/Login';

  import Wrapper from '../components/Wrapper';
  import styled from 'styled-components';

  describe('test login', () => {

    const shallowRender = (props) => shallow(<Login {...props} />);
    let LoginWrapper;

    beforeEach(() => {
      LoginWrapper = styled(Wrapper)``;
    });

    afterEach(() => {
    });

    it('always render LoginWrapper', () => {
      const login = shallowRender({
        onSubmit: () => {}
      });
      const divs = login.find(LoginWrapper);
      expect(divs).toHaveLength(1);
    });

  });

  import React from 'react';
  import Wrapper from './Wrapper';
  import { H5, Text, ALink } from '@lendi/lendi-components';
  import styled from 'styled-components';

  const LoginWrapper = styled(Wrapper)`
    .mobile {
      margin-bottom: 2px;
    }
    .signup {
      padding-left: 5px;
    }
  `;

  function Login ({onSubmit}) {
      return (
        <LoginWrapper>
          <H5 style={style.center}>
            {txt.title}
          </H5>
        </LoginWrapper>
        );
    }

export default Login;

看起来LoginWrapper 将呈现为<Styled(styled.div)> 那么找到它的正确方法是什么？

我们将不胜感激。

【问题讨论】：

它实际上被渲染为Styled(Wrapper)。将displayName 用于LoginWrapper 作为选择器怎么样。 login.find(LoginWrapper.displayName); 周围的东西
您需要在测试中导入LoginWrapper 组件。 import LoginWrapper from '../components/LoginWrapper'; 这是第一步，从那里开始。
@OluwafemiSule 感谢您的 cmets。但是login.find() 在传入不存在的样式组件时总是返回一些我无法正确测试的东西。有什么想法吗？
我有同样的问题和疑问。即使您执行以下操作：wrapper = shallow(<Login />); expect(wrapper.find(LoginWrapper)).to.contain.text('Some Text'); 您也会收到如下错误：expected the node in <LoginWrapper/> to contain text 'Some text', but it has '<styled.div />'
@worker11811 嘿，伙计。请参阅下面的链接github.com/styled-components/styled-components/issues/877

标签： unit-testing reactjs jestjs enzyme

【解决方案1】：

您可以尝试使用以下方法将 LoginWrapper 显示名称设置为 LoginWrapper：

LoginWrapper.displayName = 'LoginWrapper'

覆盖组件的显示名称。这是因为样式组件是一个 HOC，如果你用它包装你的组件，你的组件名称将会改变。

另一件事是您需要删除测试用例中的这些行，因为它没有帮助：

let LoginWrapper;

beforeEach(() => {
  LoginWrapper = styled(Wrapper)``;
});

afterEach(() => {
});

并将您的find 从const divs = login.find(LoginWrapper); 更改为类似const divs = login.find('LoginWrapper'); 的字符串

希望对你有所帮助！

【讨论】：