Probably my last quick post of the year 2016! Yay for 2017!
Recently I really got into unit testing and Jest.
What a wonderful tool! Especially to test React components! As easy as .toMatchSnapshot()! Those who did some component testing using Mocha+Chai know what I’m talking about.
Although, I faced an annoying problem recently.
jest
passes but jest --coverage
fails
You run your tests with jest
. Snapshots are generated properly and tests are passing like you expect them to do.
Life is cool.
Then you run jest --coverage
and suddenly you get something like this:
FAIL jest/CatBar.spec.js
● CatBar component › renders correctly with min params
expect(value).toMatchSnapshot()
Received value does not match stored snapshot 1.
- Snapshot
+ Received
@@ -1,13 +1,13 @@
<div
className="catbar">
<p>
I'm a cat bar. I contain cats.
</p>
- <StatelessAnimal
+ <Unknown
sound="Meow!" />
- <StatelessAnimal
+ <Unknown
sound="Meoooow!" />
- <StatelessAnimal
+ <Unknown
sound="Meeeeeeeeow!" />
<HatchingAnimal />
</div>
at Object.<anonymous> (jest/CatBar.spec.js:11:24)
at process._tickCallback (internal/process/next_tick.js:103:7)
(This is generated on purpose using this cool learning repo about Jest.)
Your tests are failing because the jest --coverage
isn’t matching the same component names than your normal jest
. It looks for Unknown
instead of your component name…
Solution: displayName
The solution is very simple even if a tiny bit annoying.
You need to specify a displayName
property on your stateless component. Like I did here to make my tests to pass with --coverage
.
StatelessAnimal.displayName = 'StatelessAnimal';
Then if you run your tests again using --coverage
it should pass.
Just make sure you don’t make any typo mistake :)
Originally found the solution on these posts: https://github.com/facebook/jest/issues/1740 and https://github.com/facebook/jest/issues/1824#issuecomment-250376673