Issues in unit testing using React testing library

[aravind-merck]

Hi, We are trying to add the unit tests using React testing library. As Liquid Oxygen components are the web component, we are not able to use the React testing library effectively.

Using jest mocks its working perfectly but the problem is, we have mock each of the components and exact functionality. Its quiet time consuming work.

Please suggest which library we can use for the unit testing without mocking the behaviour of those component?

[borisdiakur]

Hi @aravind-merck
Thanks for bringing up the testing topic. We'll have a look at this.

[renet]

I took a look at the unit tests as they are configured in the liquid-sandbox-cra-tailwind and using the web components' implementation without having to mock them.

An example test could look like this:

import { LdInput } from '@emdgroup-liquid/liquid/dist/react'
import { jest } from '@jest/globals'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('renders heading', async () => {
  const handler = jest.fn()
  render(<LdInput placeholder="Example value" onLdinput={handler} />)
  const ldInput =
    screen.getByPlaceholderText<HTMLLdInputElement>('Example value')

  await waitFor(() => expect(ldInput).toHaveClass('hydrated'))
  // eslint-disable-next-line testing-library/no-node-access
  const innerInput = ldInput.shadowRoot?.querySelector('input')!
  await userEvent.type(innerInput, ' new')

  expect(handler).toHaveBeenCalledTimes(4)
})

the jest setup file that is referenced in the setupFilesAfterEnv prop of the jest config needs to explicitly define custom elements for this to work:

// jest-setup.ts
import { defineCustomElements } from '@emdgroup-liquid/liquid/dist/loader'

defineCustomElements()

@aravind-merck Please tell me, if this helps you getting tests to work without having to mock every Liquid Oxygen web component. Please be aware that you need the latest versions of the React Testing Library dependencies for the above example to work properly.

[aravind-merck]

This makes sense Thanks @renet . Will try this and let you know if there is any issue

[mariraja-selvakumar]

How can I test the Internal Functions at the React Component by React Testing Library & Jest ?

[aravind-merck]

For improving code quality and code maintainability we are adding unit testing for every components that we are creating. Using this we can identify if anything is breaking (in development phase itself) while adding/modifying any new feature to the existing projects.

[borisdiakur]

Hi @aravind-merck,

In general, you don't need to test the "internal" functions of liquid, because they are already tested by us (if we're missing an essential test case, please let us know 📫).

However, if you want to test code in your app, which depends on the functionality of Liquid Oxygen Web Components (I suppose this is what you meant), then you have to make sure the components hydrate in your test setup as suggested by @renet.

Please note that you don't need to hydrate components if you're not relying on their internal logic. For instance, if you have <LdTypo>Some text</LdTypo> and all you want to test is the text inside the component, the component does not need to hydrate. Hydrating would only introduce unnecessary code and slow down your test in this case.

On the other hand, if you have many components, and most of them need to hydrate, and you do not want to write hydration logic for each component, you can use a utility function and await for all components to hydrate. Here is an example for such a utility function.

I hope this helps for now. I will try to find some time to write docs on the testing topic (basically consisting of the above). If you still have issues, please feel free to reach out again.

[mariraja-selvakumar]

What are you trying to test? And why?

Hi @borisdiakur,

I have a Login Component with login submit function as its internal, then how do I test that if the component triggers a submit function ..?

[borisdiakur]

Hi @MarirajaSelvakumar,
you could trigger the submit event on the form. Here is how you could do it using React Testing Library's fireEvent:

const form = await screen.findByTestId('form')
expect(form).toBeInTheDocument()

fireEvent.submit(form)

A full example can be found here.

[mariraja-selvakumar]

Thank You ... I will try this method ...

[mariraja-selvakumar]

I have a function that dispatch an action to the state & it works perfectly. But, the problem is does not execute setState method next to the dispatch method in that function. Then, how to solve it ..?

[borisdiakur]

Hi @MarirajaSelvakumar
It's difficult to help you without any context. Your question doesn't mention anything related to Liquid. Please have a look at Stackoverflow's How to ask article for some ideas on how to improve your question. Thanks.

[mariraja-selvakumar]

Thanks for your reply ...