Jest to test HTML String

Question

How do I test a HTML string using Jest?

Right now, I am doing it using regular string comparison like below. When I run this test case, it works fine.

it('should compile partial as per the context', () => {
  const receivedOutput = someFunctionReturningHTMLString();
  //*PS: someFunctionReturningHTMLString() is function which returns a html string;*
  //In above call, lets assume it returns `<a href="/" class="some_class1 some_class2" >`

  const expectedResult = `<a href="/" class="some_class1 some_class2" >`;
  expect(receivedOutput .trim()).toEqual(expectedResult.trim())
});

However, I don't find this approach of testing pure string values as a good approach.

Can somebody help me with a better way where I can actually test the content of the HTML string? Like testing whether the tag in the string has a particular class? Something like what we can achieve with Enzyme for React components.

renatodeleao · Accepted Answer · 2021-12-19 21:37:52Z

14

Assuming we're talking about testing with jest and vanilla JS.

If you want to test that you're returning valid HTML from someFunctionReturningHTMLString (which I think it's what matters) another approach would be to create a DOM Element and insert the content returned in the node with innerHTML, then you'd be able to test it as normal HTML and make sure it's valid:

it('should compile partial as per the context', () => {
  const receivedOutput = someFunctionReturningHTMLString();

  // convert output to actual HTML
  const newNode = document.createElement('div');
  newNode.innerHTML = receivedOutput;

  // Assuming your output is `<a href="/" class="some_class1 some_class2" >`
  const link = newNode.querySelector('a');

  // Test the attributes that matter to you as normal HTML
  expect(link.getAttribute('class')).toBe('some_class1 some_class2')
  expect(link.getAttribute('href')).toBe('/')
});

Then it'd be pretty straightforward testing nested elements, text nodes and so on, hope it helps.

Jest's documentation have some examples of how to work with DOM Manipulation they use jQuery to demonstrate but the applied principle is what matters.

edited Dec 19, 2021 at 21:37

renatodeleao

947 bronze badges

answered Nov 6, 2018 at 16:02

Enmanuel Duran

5,1383 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ishwar Patil Over a year ago

Enmanuel, I almost did the same thing. I know this is an old post, but thank you for sharing and explaining the thoughts.

Collectives™ on Stack Overflow

Jest to test HTML String

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related