Question

我对React和Jest单元测试框架还很陌生。我有我的组件，尝试编写一些单元测试用例，尝试了几种方法，无法继续进行下去。这是我的代码和测试用例。任何人都可以指导/建议最佳方法。非测试工作和谢谢

反应UI组件标题

import React from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import { Link } from 'react-router-dom';


const Header = ({children}) =>
    <Navbar light className="sticky-top navbar-expand-lg navbar-toggleable-sm bg-white border-bottom">
        <NavbarBrand tag={Link} to="/">Abc: Customer Portal</NavbarBrand>
        <div className="d-flex w-100 justify-content-end">
            {children}
        </div>
    </Navbar>

export default Header

测试-没有一项通过，有人可以指导我朝正确的方向前进。

import React from 'react'
import { Navbar, NavbarBrand } from 'reactstrap';
import renderer from 'react-test-renderer';
import { render, unmountComponentAtNode, ReactDOM } from "react-dom";
import { act } from "react-dom/test-utils";
import GlobalSettings from './../features/Header/GlobalSettings';
import UserDisplayName from './../features/Header/UserDisplayName';
import Header from './../features/Header/';

let container = null;
beforeEach(() => {
    // setup a DOM element as a render target
    container = document.createElement("div");
    document.body.appendChild(container);
});

afterEach(() => {
    // cleanup on exiting
    unmountComponentAtNode(container);
    container.remove();
    container = null;
});

test('test Header component', () => {
    //const nav = document.createElement('Navbar');
    ReactDOM.render(<Header>
        <Link to="/">Damage Matrix: Customer Portal</Link>
                    </Header>, Navbar);
    ReactDOM.unmountComponentAtNode(nav);
});


test('test Header', () => {
    act(() => {
        render(<Header />, container);
    });
    expect(container.appendChild).toBe("Hello");

    act(() => {
        render(<Header children="GlobalSettings" />, container);
    });
    expect(container.textContent).toBe("GlobalSettings");

});

test('renders correctly', () => {
    const tree = renderer.create(
        <Header />
    ).toJSON();
    expect(tree).toMatchSnapshot();
});

Jest UI React js组件-单元测试

0 个答案: