如何使用Jest测试React中SVG元素的无效值错误？

Great question! The approach for testing SVG elements' invalid property/value errors is actually very similar to how you test regular HTML elements—React still outputs these issues via console.error, so you can reuse the same spying pattern, but you'll need to target SVG-specific invalid cases.

Here's a step-by-step breakdown with concrete test examples:

1. Core Setup: Spy on console.error #

First, we'll spy on console.error and mock its implementation to avoid cluttering test output with React's error logs while we capture them.

2. Target SVG-Specific Invalid Cases #

SVG has its own set of attributes (like cx, cy, viewBox, fill-opacity) that have strict value requirements. For example, passing a non-numeric string to cx (which expects a valid coordinate) will trigger a React error. You can also test non-existent SVG attributes (e.g., <circle randomProp="test" />) to trigger errors, just like with HTML elements.

3. Assert the Error Was Logged #

You can either do a basic check that console.error was called, or get more precise by matching specific error message content to ensure you're catching the exact issue you care about.

Example Test Code (Detect Invalid SVG Values) #

it("detects invalid value on an SVG circle element", () => {
  // Set up spy to capture console.error and suppress output
  const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});

  try {
    // Mount an SVG with an invalid value for the `cx` prop (string instead of number)
    mount(
      <svg width="200" height="200">
        <circle cx="not-a-valid-number" cy={100} r={50} fill="blue" />
      </svg>
    );

    // Basic assertion: console.error was triggered by the invalid prop
    expect(consoleErrorSpy).toHaveBeenCalled();

    // Precise assertion: verify the error mentions the specific invalid prop and SVG tag
    expect(consoleErrorSpy).toHaveBeenCalledWith(
      expect.stringContaining("Invalid value for prop `cx` on <circle> tag")
    );
  } finally {
    // Always restore the original console.error to avoid affecting other tests
    consoleErrorSpy.mockRestore();
  }
});

Example Test Code (Verify No SVG Errors) #

If you want to confirm an SVG renders without invalid property errors, you can assert that console.error was not called:

it("renders valid SVG without errors", () => {
  const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});

  try {
    mount(
      <svg width="200" height="200">
        <circle cx={100} cy={100} r={50} fill="blue" />
      </svg>
    );

    expect(consoleErrorSpy).not.toHaveBeenCalled();
  } finally {
    consoleErrorSpy.mockRestore();
  }
});

Key Notes #

• Use try/finally: This ensures the spy is restored even if the test fails, preventing cross-test contamination.
• React version compatibility: This works for React 16+, including React 18, as long as your Enzyme version is compatible with your React version.
• Avoid false positives: Matching specific error text (instead of just checking if console.error was called) ensures you're not catching unrelated errors from other parts of your code.

内容的提问来源于stack exchange，提问作者Shoggomo