Как выполнить модульное тестирование компонента React с помощью response-intl, response-router-dom v4 и TypeScript - PullRequest
Новая
       71

Как выполнить модульное тестирование компонента React с помощью response-intl, response-router-dom v4 и TypeScript

1 голос
/ 26 января 2020

В настоящее время я пытаюсь выполнить модульное тестирование функции в компоненте класса React. Я перепробовал все, что мог, чтобы получить доступ к фактическому Компоненту.

Приложение в настоящее время настроено следующим образом: 

<IntlProvider ...>
    <BrowserRouter>
        <App/>
    </BrowserRouter>
</IntlProvider>

Компонент, который я хотел бы протестировать, Давайте назовем его Users, определяется как: 

<Route
    path="/users"
    render={(routeProps) => {
        return (
            <Users
                {...routeProps}
            />
        );
    }}
/>

Компонент users таков: 

type Props = {...}

type State = {...}

class Users extends Component<Props, State> {

    constructor(props: any) { super(props); }

    componentDidMount() { ... }

    componentWillUnmount() { ... }

    isReadOnly = (): boolean => {
        // determine if read only.
    }

}

export default withRouter(Users)

, и я пытаюсь протестировать функцию с именем isReadOnly. Мне нужно выполнить setState () для компонента, прежде чем я смогу на самом деле вызвать функцию.

Пока я пытался: 

const wrapper = shallow(<OrderEntry {...props}/>);

Но выдает ошибку: ShallowWrapper::setState() can only be called on class components

Я подумал, что это должно быть из-за BrowserRouter. Так что я нахожу, что мне нужно обернуть в MemoryRouter, чтобы обойти это. 

const wrapper = shallow(<MemoryRouter><Users {...props}/></MemoryRouter>);
const usersInstance = wrapper.find(Users).dive().instance();
usersInstance.setState(state);

Это выдает ошибку: TypeError: Cannot read property 'setState' of null

Если я console.log(wrapper), он выводит: ShallowWrapper {}.

Я немного растерялся ... Мне просто нужно уметь делать 2 вещи - установить состояние и выполнить модульное тестирование одной из функций компонентов.

1 Ответ

1 голос
/ 30 января 2020

Redux docs предлагает экспортировать неподключенный компонент (Users в вашем случае) и использовать его в тестах. Таким образом, вы получаете полный контроль над реквизитом, передаваемым визуализированному экземпляру, и, в качестве бонуса, не возникает проблем с использованием фермента setState.

Так что-то вроде: 

export class Users extends Component<Props, State> {

    componentDidMount() { ... }

    componentWillUnmount() { ... }

    isReadOnly = (): boolean => {
        // determine if read only.
    }
}
export default withRouter(Users);

И в тестах: 

import {Users} from "./Users";
...