无法使用自定义验证器测试React propType

Question

我正在使用带有React-Test-Library的jest来测试一个具有自定义prop-types验证器的组件。验证器如下所示：

aspectRatio: (props, propName, componentName) => {
    const value = props[propName];
    const cleaned = value
        .trim()
        .replace(/[^0-9:]+/g, ''); // Replace everything but numbers and forward slash.

    // Ensure value is “number/number”.
    const isCorrectFormat = /^\d+:\d+$/.test(cleaned);

    if (!isCorrectFormat) {
        return new Error(`Invalid value format “${value}” supplied to “${propName}” prop in “${componentName}” component. Expected something like “3:2”.`);
    }
},

我的测试看起来是这样的：

test('throws error when incorrect aspect ratio format passed', () => {
    expect(() => {
        render(
            <Picture
                alt="Hello, picture."
                aspectRatio="1-1/8"
                src="test/books.jpg"
            />,
        );
    }).toThrowError();
});

当呈现错误的aspectratio时，验证器按预期工作。我在控制台中得到以下错误：

Warning: Failed prop type: Invalid value format “1-1/8” supplied to “aspectRatio” prop in “Picture” component. Expected something like “3:2”.

但在运行上述测试时，我在终端中得到这样的消息：

  ● throws error when incorrect aspect ratio format passed

    expect(received).toThrowError()

    Received function did not throw

      81 |          />,
      82 |      );
    > 83 |  }).toThrowError();
         |     ^
      84 |  spy.mockRestore();
      85 | });
      86 |

我错过了什么？

Answer 1

由于propType验证器实际上并不throw，所以我能够通过测试console.warn内容来解决问题。

js prettyprint-override">test('throws error when incorrect aspect ratio format passed', () => {
    console.error = jest.fn();
    render(
        <Picture
            alt="Hello, picture."
            aspectRatio="1-1/8"
            src="test/books.jpg"
        />,
    );
    expect(console.error.mock.calls[0][2]).toBe('Invalid value format “1-1/8” supplied to “aspectRatio” prop in “Picture” component. Expected something like “3:2”.');
});