Блог

Главная - Вопросы по программированию - Предупреждение о тестовом примере маршрутизатора React enzyme react: React.createElement: недопустимый тип

Предупреждение о тестовом примере маршрутизатора React enzyme react: React.createElement: недопустимый тип

#javascript #enzyme #react-router-dom

#javascript #фермент #react-router-dom

Вопрос:

Я использую react-router-dom в своем приложении react. Приложение отлично работает в браузере без каких-либо ошибок или предупреждений, но когда я пишу тесты, я получаю предупреждение «React.createElement: тип равен ….»

Вот мой тестовый код:

 import React from 'react';
import NavBar from './components/nav-bar';
import {configure, mount, shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'
import {expect} from 'chai';
import App from "./App";
import {MemoryRouter} from 'react-router';

configure({adapter: new Adapter()});

jest.mock('react-router-dom', () => ({
    useLocation: jest.fn().mockReturnValue({
        pathname: '/another-route',
        search: '',
        hash: '',
        state: null,
        key: '5nvxpbdafa',
    }),
}));

describe("Movie Library Testing", () => {
    it('renders react app', () => {
        const wrapper = shallow(
            <App/>
        );
        expect(wrapper.find(NavBar)).to.have.lengthOf(1);
    });

    it('renders an `.navbar-brand', () => {
        const wrapper = mount(
            <MemoryRouter>
                <NavBar user={null}/>
            </MemoryRouter>
        );
        expect(wrapper.find('.navbar-brand')).to.have.lengthOf(1);
    });
});

Я получаю следующую ошибку:

 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your componen
t from the file it's defined in, or you might have mixed up default and named imports.
    
    Check your code at nav-bar.tsx:41.
        in NavBar (at App.test.tsx:31)
        in Router (created by MemoryRouter)
        in MemoryRouter (created by WrapperComponent)
        in WrapperComponent

NavBar.tsx содержит следующий код в данной строке:

 import { NavLink } from 'react-router-dom'
<NavLink className="nav-link" to="/login">Login</NavLink>

export default NavBar;

Комментарии:

1. В вашем коде нет инструкции export. Таким образом, панель навигации не определена в вашем тестовом коде. Можете ли вы опубликовать свой NavBar.tsx полностью

2. @VigneshMurugan если вы установите флажок, он будет содержать файл ‘nav-bar.tsx’

Ответ №1:

Изменить

 import {NavBar} from './components';

Для

 import NavBar from './components';

Комментарии:

1. Я убедился в этом. Но все еще безуспешно. Также обновлен вопрос.

2. @Sanky в вашем тестовом файле вы также тестируете приложение. и в приложении вы, вероятно, забыли также изменить import {NavBar} на import NavBar . также после обновления кода, пожалуйста, обновите стек ошибок.

3. @Sanky, опубликуй свой код nav-bar.tsx для точного анализа. Вот возможный nav-bar.tsx, который у вас может быть: import React from 'react' import { NavLink } from 'react-router-dom' export default function NavBar () { return ( <NavLink className="nav-link" to="/login">Login</NavLink> ) }

4. @ParikshithKedilayaM Спасибо. Я нашел проблему. Это был макет ‘react-router-dom’, вызывающий проблему,