Closed JeffGuKang closed 3 years ago
I think it will be solved by mocking as like
jest
.spyOn(Date, 'now')
.mockImplementation(() => new Date('2020-09-01').valueOf())
Because date values are used a lot in test cases, I set a standard date instead of using spyOn.
@oh3vci It is not solved yet. Snapshots change everyday.
spyOn
is not working with Date
.
Related issues:
I finally mocked global.Date
through
const standardDate = new Date('2020-09-01');
const _Date = Date;
// @ts-ignore
global.Date = jest.fn(() => standardDate);
global.Date.UTC = _Date.UTC;
global.Date.parse = _Date.parse;
global.Date.now = _Date.now;
But I couldn't mocking toLocaleString
.
Already tried
const localeOption = {
year: '2-digit',
month: '2-digit',
day: '2-digit',
};
const dateSpy = jest.spyOn(global.Date.prototype, 'toLocaleString') .mockImplementation(() => new Date().toLocaleString('UTC', localeOption));
2. [installing full-icu for node 12 and earlier](https://stackoverflow.com/a/56624712/515932): not working
I think it's good to exclude snapshots from the Datepicker test.
@JeffGuKang How about we add today
as a props for DatePicker
? That would eliminate the need for mocking global.Date
, and also allow us to use snapshot testing.
@JeffGuKang How about we add
today
as a props forDatePicker
? That would eliminate the need for mockingglobal.Date
, and also allow us to use snapshot testing.
But I couldn't control locale
in dooboo-ui node environment for testing.
It seems to be dependent on the user's OS.
For example,
Weekdays would be 'Mon', 'Tue'... in en-EN
. But in Korean OS, this appears to be '월', '화'...
And we cannot control locale manually as I said https://github.com/dooboolab/dooboo-ui/issues/337#issuecomment-692028016.
We can except validation from specific area of snapshots through matcher
. It can be the one of the solutions.
@JeffGuKang I suggest we use react-intl
package for internationalization instead of toLocaleString
and add today
props to DatePicker
component. react-intl
(from FormatJS) allows developers to wrap components with IntlProvider
, so we can provide { locale: 'en' }
for testing and provide user-specific locale for production.
Here's the relevant documentation : https://formatjs.io/docs/guides/testing#jest Excerpt:
import React from 'react'
import renderer from 'react-test-renderer'
import {IntlProvider} from 'react-intl'
const createComponentWithIntl = (children, props = {locale: 'en'}) => {
return renderer.create(<IntlProvider {...props}>{children}</IntlProvider>)
}
export default createComponentWithIntl
import React from 'react'
import createComponentWithIntl from '../../utils/createComponentWithIntl'
import AppMain from '../AppMain'
test('app main should be rendered', () => {
const component = createComponentWithIntl(<AppMain />)
let tree = component.toJSON()
expect(tree).toMatchSnapshot()
tree.props.onClick()
tree = component.toJSON()
expect(tree).toMatchSnapshot()
})
As adding locale prop to component, I implemented already this approach without react-intl
. Can you check this? #347
@oh3vci It looks good to me. So I guess we just need to test DatePicker
with locale
and today
props defined.
BTW do we have any timezone related issue with DatePicker
snapshot testing?
I think timezone issue is already solved problem, because I set en to the value of the locale prop that is the locale parameter of toLocaleString method in test code. So the test snapshot will no longer be affected by the OS.
@oh3vci Did you try locale props with 'kr-KR' or other timezones when you test? Did it work as like '월', '화'...?
@JeffGuKang I tried setting locale
props to ko-KR
in storybook. Korean characters show up correctly on web, but it does not work on Android. The same thing happens for locale="es-ES"
.
@oh3vci Did you try locale props with 'kr-KR' or other timezones when you test? Did it work as like '월', '화'...?
Isn't it 'ko-KR', not 'kr-KR'?
@JeffGuKang I tried setting
locale
props toko-KR
in storybook. Korean characters show up correctly on web, but it does not work on Android. The same thing happens forlocale="es-ES"
.
I guess it seems to be another bug of android or storybook. it works well in iOS.
@oh3vci How about testing environment? Testing is not work as expectation with locale control or mocking.
@JeffGuKang locale
props works inside jest.
I tested this first,
<DatePicker selectedDate={standardDate} locale={'ko-KR'} />
then this,
<DatePicker selectedDate={standardDate} locale={'en-US'} />
Here's the snapshot diff:
- Snapshot - 7
+ Received + 7
@@ -247,11 +247,11 @@
"color": "#ff424c",
},
]
}
>
- 일
+ S
</Text>
</View>
<View
style={
Array [
@@ -279,11 +279,11 @@
"color": "#565656",
},
]
}
>
- 월
+ M
</Text>
</View>
<View
style={
Array [
@@ -311,11 +311,11 @@
"color": "#565656",
},
]
}
>
- 화
+ T
</Text>
</View>
<View
style={
Array [
@@ -343,11 +343,11 @@
"color": "#565656",
},
]
}
>
- 수
+ W
</Text>
</View>
<View
style={
Array [
@@ -375,11 +375,11 @@
"color": "#565656",
},
]
}
>
- 목
+ T
</Text>
</View>
<View
style={
Array [
@@ -407,11 +407,11 @@
"color": "#565656",
},
]
}
>
- 금
+ F
</Text>
</View>
<View
style={
Array [
@@ -439,11 +439,11 @@
"color": "#565656",
},
]
}
>
- 토
+ S
</Text>
</View>
</View>
<ScrollView
data={
@0916dhkim Cool. We can use snapshot test again for DatePicker.
@oh3vci Did you try locale props with 'kr-KR' or other timezones when you test? Did it work as like '월', '화'...?
Isn't it 'ko-KR', not 'kr-KR'?
@JeffGuKang I tried setting
locale
props toko-KR
in storybook. Korean characters show up correctly on web, but it does not work on Android. The same thing happens forlocale="es-ES"
.I guess it seems to be another bug of android or storybook. it works well in iOS.
Maybe, this is related issue in android.
@oh3vci It is working well now with #351. 👍
Describe the bug
Tests always fail due to date issues.
To Reproduce Steps to reproduce the behavior:
npx jest DatePicker --coverage
Expected behavior
Mock date to specific day for test.
Screenshots
Desktop (please complete the following information):
X
Smartphone (please complete the following information):
X
Additional context
X