wise-white•2y ago

How can I render `data-testid: 'something'` into Refine components?

So I basically want to render some testids into our generated components for some simple component tests. I can do the following:

<Antd.Table {...tableProps} rowKey="id" data-testid="list">
...
</Antd.Table>

<Antd.Table {...tableProps} rowKey="id" data-testid="list">
...
</Antd.Table>

So list-component is done, as well as the edit + create components because I can adjust Antd just fine! ✅ 🙌 But when I try to do the same inside my show-component (which comes from RefineAntd):

<RefineAntd.Show isLoading={isLoading} data-testid="show">
...
</RefineAntd.Show>

<RefineAntd.Show isLoading={isLoading} data-testid="show">
...
</RefineAntd.Show>

The testid is not being rendered at all.

6 Replies

kapa.ai•2y ago

Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems that the Show component from RefineAntd does not support the data-testid attribute directly. This attribute is typically used for testing purposes and it's not mentioned in the documentation extracts provided. However, you can customize the Show component using the refine CLI (https://refine.dev/docs/packages/documentation/cli/) to add the data-testid attribute or any other custom functionality you need. This process is known as "swizzling". Unfortunately, the extracts do not provide specific instructions on how to swizzle the Show component to add a data-testid attribute. For more detailed instructions, you may need to refer to the refine CLI documentation (https://refine.dev/docs/packages/documentation/cli/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@317433576721219584> kapa.ai is still learning and improving, please let us how it did by reacting below

wise-whiteOP•2y ago

@kapa.ai is there a way to provide a testid to my component without swizzling the Refine Show component?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, there doesn't seem to be a direct way to provide a data-testid to the Show component without swizzling. The Show component's properties mentioned in the extracts do not include data-testid or any similar attribute for testing purposes. However, you might be able to wrap the Show component in a parent div and assign the data-testid to that div. Here's an example:

<div data-testid="show">
  <RefineAntd.Show isLoading={isLoading}>
    ...
  </RefineAntd.Show>
</div>

<div data-testid="show">
  <RefineAntd.Show isLoading={isLoading}>
    ...
  </RefineAntd.Show>
</div>

This way, you can select the parent div in your tests and indirectly test the Show component. Please note that this is a workaround and might not work for all testing scenarios. For more complex customizations, swizzling would be the recommended approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@317433576721219584> kapa.ai is still learning and improving, please let us how it did by reacting below

wise-whiteOP•2y ago

That should do it for the moment I guess 👍

How can I render `data-testid: 'something'` into Refine components?

Did you find this page helpful?