unit-testing - 如何测试样式化组件？

我需要测试的是 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);
    });

  });

登录.js

  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)> 一样呈现，那么找到它的正确方法是什么？

任何建议将被认真考虑。

最佳答案

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

LoginWrapper.displayName = 'LoginWrapper'

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

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

let LoginWrapper;

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

afterEach(() => {
});

并将以下 find 从 const divs = login.find(LoginWrapper); 更改为这样的字符串 const divs = login.find('LoginWrapper');
我希望这有帮助!

关于unit-testing - 如何测试样式化组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44307339/