Реакция юнит-теста для компонента, имеющего LInk

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

Это из-за обертки withRouter поверх фактического компонента.

Вам нужно сделать это

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

Это сделает поверхностный рендеринг фактического компонента.

Answer 2

Из официальных документов реакции-маршрутизатора:

Если вы попытаетесь выполнить модульное тестирование одного из ваших компонентов, который отображает или и т. Д., Вы получите некоторые ошибки ипредупреждения о контексте.Хотя у вас может возникнуть соблазн заглушить контекст маршрутизатора самостоятельно, мы рекомендуем вам обернуть свой модульный тест в или .

По этой причине вы получаетеошибка:

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');
    });