Rendall rendall

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

NPoco/PetaPoco stored procedures with named strong type parameters

StoredProcedures.tt file automatically generates a C# code file with calsses and methods corresponding to your database stored procedure definitions. This is then used to simply call stored procedures within NPoco/PetaPoco and avoid magic strings and parameter type guessing. It also supports output parameters.

Stored procedures naming conventions

In order to have your stored procedure calls well structured there are particular yet simple naming conventions you should follow when creating your stored procedures:

Name your stored procedures as ClassName_Method
If a particular stored procedure shouldn't be parsed you should omit underscore character in its name; this will make it private from the perspective of your C# as it will only be accessible to other stored procedures but won't be parsed.

	DECLARE @ClarionDate INT = 47563
	DECLARE @SqlDateTime DATETIME

	-- Convert the clarion DATE into and SQL DateTime
	SET @SqlDateTime = DateAdd(day, @ClarionDate - 4, '1801-01-01')

	SELECT @SqlDateTime AS 'SQL Date Time'

	-- Now convert it back from and SQL DateTime to a Clarion Date
	SET @ClarionDate = DateDiff(day, DateAdd(day, -4, '1801-01-01'), @SqlDateTime)