Custom Jest Snapshots Directory Setup

#react #reactnative #testing #javascript

When you want to place your component test files right next to the component's but you don't want your directories littered with __snapshots__/ dirs:

// __snapshots__/snapshotResolver.js

module.exports = {
  resolveSnapshotPath: (testPath, snapshotExtension) =>
    testPath
      .replace(
        /\.test\.([tj]sx?)/, 
        `.test${snapshotExtension}`
      )
      .replace(
        /src([/\\]components)/, 
        '__snapshots__'
      ),

  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
    snapshotFilePath
      .replace(snapshotExtension, '.js')
      .replace('__snapshots__', 'src/components'),

  testPathForConsistencyCheck: 'src/components/some.test.js',
}

// jest.config.js

module.exports = {
  preset: 'react-native', // optional depending on your project

  snapshotResolver: './__snapshots__/snapshotResolver.js',

  testMatch: [
    '**/__tests__/**/?(*.)+(spec|test).(js|ts|tsx)', 
    '**/?(*.)+(spec|test).(js|ts|tsx)'
  ],
}

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.