For my React testing environment, I use Mocha, Enzyme, and Sinon. When I run my npm test
script, Mocha runs and enters "watch" mode.
Recently, I noticed a strange and slightly annoying issue, where my initial test run would display prop type warnings, but successive runs via watched file changes would not.
Note: I am using the min
reporter inside my mocha.opts file. Also, the component name shown below is respective to my code base, but we can assume any generic name, i.e. MyComponent
.
Here's an example of the test output:
Initial Test Run
Subsequent Test Runs (via watched files)
In the second screenshot from above (a test run via a watched file change), I had not fixed the problematic prop types code within the offending component, yet my prop type warning disappeared. Why does this happen? It turns out, this is by design within the React code base. They only warn about props when a "new" component is rendered. Subsequent renders of the same component will NOT display warnings, as to avoid spamming the console or STDOUT.
So how do we fix this? The answer is fairly simple, actually. We can take advantage of the displayName
property on the component, and update this within the beforeEach
hook for any given suite.
describe('My suite', () => {
beforeEach(() => {
MyComponent.displayName = `MyComponent${Math.random().toString()}`;
});
// Test code down here...
});
Now, when our tests run, React will interpret the component as "new", since its displayName
is changing. You'll see warnings on every test run, rather than just the initial one. Here's an example of the output (cropped from right):
Once you've fixed the warnings, just be sure to remove the displayName
code from your tests!
Hopefully this helps you to quickly and somewhat painlessly fix any random PropTypes warnings in your Mocha tests!
Top comments (0)