抛光的函数只在测试套件中抛出错误，而不是在实际的应用程序/浏览器中

Question

我有一个按钮，它使用polished(styled-componenents(中的lighten助手。我在悬停时调用它，如下所示：

FAB.styles.tsx

&:hover,
&:focus {
* {
cursor: pointer;
}
background: ${(props) => lighten(0.1, props.theme.primary)};
transition: background 0.25s;
}

没有错误，完全按照预期工作。

当我尝试测试该组件时，我会得到以下错误：

Passed an incorrect argument to a color function, please pass a string representation of a color.
41 |     }
42 |
> 43 |     background: ${(props) => lighten(0.1, props.theme.primary)} !important;

为什么在浏览器中没有抛出此类错误的情况下，这只会在此处抛出错误？

Answer 1

答案是将您的测试封装在主题提供者中。您可以使用自定义渲染方法来实现这一点，类似于安装时测试库文档中显示的方法。

const Wrapper = ({ children }: any) => {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};
export const customRender = (
ui: ReactElement,
options?: Omit<RenderOptions, "wrapper">
) => render(ui, { wrapper: Wrapper, ...options });
export * from "@testing-library/react";

it("renders something", () => {
customRender(<Component />);
const linkElement = screen.getByTitle(/Work with us/i);
expect(linkElement).toBeInTheDocument();
});

多亏了Brian Hough的帮助，我找到了答案，他是抛光/造型组件的维护者之一。你可以在这里看到我们的线索。