Question

我需要使用Jest在反应中访问和测试子组件的方法。我未使用酶，因此这不是this question或this question的副本。我想使用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中的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"); });中，所以我必须执行以下操作：（基于recipe suggested by React Testing Library）

<Router>

我知道尝试在子组件上测试方法不是理想的。但是我需要这样做，因为我必须将此组件呈现在<App />内部。有没有什么方法可以使用function displayWelcome() { printLine(); console.log('Welcome to the credit card payoff tool.'); printLine(); console.log('This program will determine the time it \nwill take to pay off a credit card!'); printLine(); } displayWelcome(); function calculateMinimumPayment(balance, interestRate) { var calcMinPay = balance * interestRate; return calcMinPay } function generatePaymentId() { // lines 14 - 22 are a closure function. var count = 0; function paymentId() { count ++; return count; } return paymentId; }; var id = generatePaymentId(); function processPaymentSchedule(balance, interest, minimumPayment) { var year = 1; var counter = 0; while (balance > counter) { var interestDecimal = interest / 100; var interestMonthly = interestDecimal / 12; var interestPaid = balance * interestMonthly; var payment = { year: year, balance: balance, paymentId: id(), interest_paid: interestPaid } displayPayment(payment); balance = balance - interestPaid; return balance; } } function displayPayment(payment) { console.log(payment.year); } printLine(); function printLine() { console.log('---------------------------------------'); } printLine(); processPaymentSchedule(1500,18, calculateMinimumPayment()); /* It should take the balance monthly interest rate and minimum payment as arguments. Each time you calculate a new payment line, create an object literal with properties for the year balance and payment id and interest paid. Pass this object literal to the displayPayment function. */组件方法而无需使用酶，或在必要时使用React测试库？

Answer 1

您不能使用测试库来做到这一点，这与principles背道而驰。您还使用一种奇怪的样式进行测试。您是否尝试过这样做：

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

如何在没有酶的情况下测试子组件方法？

1 个答案: