Question

我有一个名为产品的React组件，如下所示：

 test("header text is being passed through correctly", () => {
        const wrapper = mount(
            <Product items={data} headerText="Service" paginationSize="5" noItemMessage="No results found" />
        );
        expect(wrapper.find(HeaderText).text()).toEqual("Service");

其中 Wrapper ，标题，服务， TableWrapper 是样式组件。我正在尝试使用Jest和Enzyme测试此组件以检查headerText道具是否正确呈现。下面给出的代码就是我试图编写测试用例的方法：

TypeError: Cannot read property 'blue' of undefined

      at Object.<anonymous>.exports.RightArrow.Icons.RightArrow.extend.props (src/lib/DataTable.js:149:129)

但我收到此错误：

color: ${props => props.theme.secondary.blue};

，DataTable.js中的第149行是：

{{1}}

我无法弄清楚为什么会收到此错误。任何人都可以指导我这个问题吗？我只是想检查headerText是否从道具中正确呈现。

Answer 1

在你的包装器中添加主题作为道具

<Product items={data} theme={{secondary: {blue: ''}}} headerText="Service" paginationSize="5" noItemMessage="No results found" />

或嘲笑

import { createSpy } from 'expect'; const theme = createSpy(); <Product items={data} theme={theme} headerText="Service" paginationSize="5" noItemMessage="No results found" />

Answer 2

我们可以使用样式化的componnet的themeProvider来围绕酶的Q_DECLARE_METATYPE(Container*)或shallow方法创建一个包装器，如下所示：

mount

最好将utils mountWithTheme和ShallowWithTheme提取到另一个文件中，以便可以重复使用，并且作为建议，您可以创建一个模拟主题文件，其中包含一些可以传递给这些包装器的默认主题而不是每次使用这些实用程序时都手动传递主题。

更多信息，请访问以下链接： https://github.com/styled-components/styled-components/issues/1319

如何使用React中的Jest和Enzyme测试是否在Component中正确呈现了prop

2 个答案: