Как проверить метод дочернего компонента без энзима? - PullRequest
Новая
       36

Как проверить метод дочернего компонента без энзима?

0 голосов
/ 25 сентября 2019

Мне нужно получить доступ и проверить метод дочернего компонента в реакции с использованием Jest.Я не использую энзим , так что это не дубликат этого вопроса или этого вопроса .Я бы хотел использовать React Testing Library вместо Enzyme.

Раньше я с радостью получал доступ к методам, которые мне нужно было проверить, вот так: 

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import App from "./App";

let container: any = null;
beforeEach(() => {
    // setup a DOM element as a render target
    container = document.createElement("div");
    document.body.appendChild(container);
});

afterEach(() => {
    // cleanup on exiting
    unmountComponentAtNode(container);
    container.remove();
    container = null;
});

test("methodToTest should do what I want it to", () => {
    const { methodToTest } = render(<App />, container);
    methodToTest("some input");
    const output = document.querySelector(".outputFromMethod");
    expect(output.innerHTML).toBe("You gave me some input");
});

Но теперь мне нужно обернуть <App /> компонент withRouter() из react-router-dom, поэтому я должен сделать что-то вроде этого: (на основе рецепта , предложенного библиотекой React Testing ) 

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render, unmountComponentAtNode } from "react-dom";
import App from "./App";

let container: any = null;
beforeEach(() => {
    // setup a DOM element as a render target
    container = document.createElement("div");
    document.body.appendChild(container);
});

afterEach(() => {
    // cleanup on exiting
    unmountComponentAtNode(container);
    container.remove();
    container = null;
});

test("methodToTest should do what I want it to", () => {
    // THIS DOESN'T WORK NOW FOR GETTING methodToTest
    const { methodToTest } = render(<Router><App /></Router>, container);
    const output = document.querySelector(".outputFromMethod");
    expect(output.innerHTML).toBe("You gave me some input");
});

Я понимаю, что этоне идеально пытаться тестировать методы на дочернем компоненте.Но мне нужно сделать это, потому что мне нужно, чтобы этот компонент рендерился внутри <Router>.Есть ли способ получить доступ к методам компонентов <App /> без использования фермента или библиотеки React Testing, если это необходимо?

1 Ответ

2 голосов
/ 25 сентября 2019

Вы не можете сделать это с помощью библиотеки тестирования, это противоречит принципам .Вы также используете странный стиль для тестирования.Вы пытались сделать это: 

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "@testing-library/react";
import App from "./App";
import "@testing-library/jest-dom/extend-expect";

test("methodToTest should do what I want it to", () => {
    const { getByText } = render(<Router><App /></Router>);
    expect(getByText("You gave me some input")).toBeInTheDocument();
});
...