Question

我正在尝试为具有Link

的组件编写单元测试用例

所以，我的组件就像，

 import { Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom'

    <div className="col-sm-4">
                    <Link to="create-job/new" style={{ textDecoration: 'none'}}><button type='button' className="btn btn-lg btn-primary btn-block button-container">Create New Job</button></Link>
                </div>
export default withRouter(JobNotFound);

现在，我所做的是，

import JobNotFound from '../JobNotFound';
import { Link } from 'react-router';


describe('JobNotFound Component test cases', () => {

    it("renders JobNotFound Component successfully", () => {
        const wrapper = shallow(
            <JobNotFound />
        );
        expect(wrapper).toMatchSnapshot();
    });

    it("simulate the click event on Button", () => {
        const onButtonClick = sinon.spy();
        const wrapper = shallow(<JobNotFound />);
        expect(wrapper.find('Link').prop('to')).to.be.equal('/create-job/new');
    });
})

因此，在这里我没有得到那个Link元素。有人可以帮我这个忙吗？

Answer 1

react-router的官方文件中

如果您尝试对呈现的组件之一进行单元测试或<路线>等。您会收到一些有关上下文的错误和警告。虽然您可能会想自己亲自添加路由器上下文，但我们建议您将单元测试包装在或< MemoryRouter>。

这是您收到错误的原因：

You should not use <Route> or withRouter() outside a <Router>

在测试链接组件时，应将它们包装在这些路由器之一中。

例如：

import { MemoryRouter } from 'react-router-dom';
const wrapper = shallow(<MemoryRouter>
<JobNotFound/>
<MemoryRouter/>);

此外，由于您要使用子组件，因此请尝试使用mount而不是shallow。

更新：

以下测试通过了我

import { Link,MemoryRouter as Router } from 'react-router-dom';

    test('simulate the click event on Button', () => {

      const onButtonClick = sinon.spy();
      const wrapper = mount(<Router><JobNotFound /></Router>);
      expect(wrapper.find(Link)).toBeTruthy();
      expect(wrapper.find('Link').prop('to')).toEqual('create-job/new');
    });

Answer 2

那是因为在实际组件的顶部有withRouter包装器。

您需要这样做

const wrapper = shallow(<JobNotFound.WrappedComponent />);

这将使实际组件浅化。

具有LInk的组件的React单元测试用例

2 个答案: