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)
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');