angularunit-testingts-jestangular-pipeangular-testing-library

Angular number pipe + Jest + Angular testing library. Whitespace is not equal to whitespace?


Can anybody help me to figure this out please ?

Im trying to test a number value in my dom. It is the result of complex calculation. It is formatted in french locale, cause application is french. Used version : Angular 19.1, jest 29.7, angular-testing-library 17.3.6.

Here is an example of what i am trying to do:

import { render, screen } from '@testing-library/angular';
import '@angular/common/locales/global/fr';
import { userEvent } from '@testing-library/user-event';
import {Component} from '@angular/core';
import {DecimalPipe} from '@angular/common';

@Component({
  selector: 'my-component-to-test',
  imports: [
    DecimalPipe
  ],
  template: `
    <div data-testid="number-format">{{ 234567 | number: "1.0-0" : "fr-FR" }}</div>
  `
})
class MyComponentToTestComponent{}

describe('MyComponentToTestComponent', ()=> {

  beforeEach(()=> {
    render(MyComponentToTestComponent)
  })

 it('should be equal to 234567', ()=> {
   expect(screen.getByTestId('number-format').innerHTML).toEqual('234 567');
 })

})

This test gives this error, '234 567' is not equal to '234 567'... The whitespace doesn't match the whitespace. Test report

How can i assert that the value is correct please ? (i don't mind about format, i want to assert the value whithout doing something to ugly)


Solution

  • The format output uses nonbreakable spaces.

    Encode a non breakable space (or copy it from somewhere).

    expect(screen.getByTestId('number-format').innerHTML).toEqual('234\uc2a0567');
    

    or

    expect(screen.getByTestId('number-format').innerHTML).toEqual('234 567');