Question

我正在尝试测试HTML代码<Tr></Tr>。这是我的代码：

const children = (<h1>Test</h1>);
    const renderComponent = () => shallow(
      <Table>
        <Tr>
          {children}
        </Tr>
      </Table>
    );


    describe("<Tr />", () => {
      it("should render a <Tr> tag within a <Table> tag", () => {
        const renderedComponent = renderComponent();
        expect(renderedComponent.type()).toEqual("tr");
      });
    });

此处的问题是我的测试将标记<Table>定位为renderedComponent的类型，从而返回失败的测试。

如何更改expect测试以找到第二个标记<Tr>而不是第一个<Table>？

注意：

我正在使用一个名为styled-component的新库，它允许我将HTML标记转换为包含css为Js的最基本的React组件。

import styled from "styled-components";

    const Table = styled.table`
      border: 1px solid black;
      border-collapse: collapse;
      width: 100%
    `;

    export default Table;

因此，我的组件仅限于他们自己的标签，并且还不包含任何内容。

Answer 1

如果您有大写Table和Tr，JSX compiler expects to have such component defined。因此，只需对HTML标记使用小写。

这项工作对我来说：

const children = (<h1>Test</h1>);
const renderComponent = () => shallowWithIntl(
    <table>
        <tr>
            {children}
        </tr>
    </table>
);


describe('<Tr />', () => {
    it('should render a <Tr> tag ', () => {
        const renderedComponent = renderComponent();
        expect(renderedComponent.type()).to.equal('table');
    });

    it('should have children', () => {
        const renderedComponent = renderComponent();
        expect(renderedComponent.contains(children)).to.equal(true);
    });
});

Chai测试另一个组件中的组件类型

1 个答案: