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

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

从反应路由器的官方文件中：

如果尝试对呈现<Link>或<Route>等的组件之一进行单元测试，则会收到一些有关上下文的错误和警告。虽然您可能会想自己亲自添加路由器上下文，但建议您将单元测试包装在<StaticRouter>或<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');
    });