4 posts tagged with "jest-preview"

What make a software high quality, maintainable, reliable and scalable? Many factors. but one of the most important: Tests. Software without test is not a very good software. Why we need tests? To not break the existing features when we extending the product, do the A/B testing, experiment to explore the market... All the messy things could quickly turn software's source code into a tangled and fragile system. But testing in FE is not similar to testing in other domains (TBD wording). It's a different kind of testing that is not only about the code but also about the user experience. But the importance of having a tests is still the same.

When it comes to FE testing, we have some types of tests (https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications):

• Static testing
• Unit testing
• Integration testing
• End-to-end testing

Between those, Integration testing might be the optimal one.

• Fast
• With a good strategy, integration tests with jest brings very high level of confidence, almost close to e2e testing.

But when test with Jest, it's not a good DX when a test fail (which is a scenario most of the time). We have to see entire HTML, which is hard to read and imagine

Jest Preview was born to solve this problem.

Jest Preview open an external browser, and display your application's UI in jest in that browser.

All you need to do is preview.debug()

In the future, you don't have to do anything, application's snapshot will be automatically updated whenever test fails. Track progress at https://github.com/nvh95/jest-preview/pull/87

TODO: Insert diagram of Jest Preview Dashboard, Jest Preview Server, Jest process, browser and how they interact

Jest Preview help you writing test faster, debug tests faster (more intuitive), make you happier.

Jest help you reach closer to the level of confidence of e2e tests like cypress, but much much faster.

Eventually, Jest Preview hope to increase DX of front end engineers. => encourage them to write more tests => more better quality application

call to action: need help on contributing, documentation

Examples​

• Jest Preview with Next.js Rust-based compiler
• Jest Preview with Next.js Babel

First-class support for Next.js Rust-based compiler for Jest​

We want Jest Preview to have the best DX for all frontend developers. Besides, Next.js is a wonderful and extremely popular React framework that is powered by Vercel. So we are providing a first-class support for Next.js by offering an adapter to integrate Jest Preview to Next.js effortlessly, thanks to great work from thanhsonng. If you use Next.js version 12.0.0 onwards, you can just use configureNextJestPreview to configure Jest seamlessly:

  const nextJest = require('next/jest')
+ const { configureNextJestPreview } = require('jest-preview')

  const createJestConfig = nextJest({
    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
    dir: './',
  })

  // Add any custom config to be passed to Jest
  const customJestConfig = {
    // Add more setup options before each test is run
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
    moduleDirectories: ['node_modules', '<rootDir>/'],
    testEnvironment: 'jest-environment-jsdom',
  }
- module.exports = createJestConfig(customJestConfig)
+ module.exports = configureNextJestPreview(createJestConfig(customJestConfig));

Remember to update script to run Jest Preview Dashboard

{
  "scripts": {
    "jest-preview": "jest-preview",
  },
}

and configure external CSS files if there are any.

import { jestPreviewConfigure } from 'jest-preview';

jestPreviewConfigure({
  // An array of relative paths from the root of your project
  externalCss: [
    'styles/globals.css',
    // SCSS is also supported
    'demo/globals.scss',
    // Any CSS from node_modules is fine
    'node_modules/@your-design-system/css/dist/index.min.css',
  ],

For details, please refer to Installation guide. You can also see the full example at Nextjs with Rust compiler

Support for Jest with Babel​

If you want to use Babel for compiling your tests, you can follow the Installation guide, or just see the full example at Next.js Babel.

  module.exports = {
    collectCoverageFrom: [
      '**/*.{js,jsx,ts,tsx}',
      '!**/*.d.ts',
      '!**/node_modules/**',
    ],
    moduleNameMapper: {
-     // Handle CSS imports (with CSS modules)
-     // https://jestjs.io/docs/webpack#mocking-css-modules
-     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
-
-     // Handle CSS imports (without CSS modules)
-     '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
-
-     // Handle image imports
-     // https://jestjs.io/docs/webpack#handling-static-assets
-     '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
-
      '^@/components/(.*)$': '<rootDir>/components/$1',
    },
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
    testEnvironment: 'jsdom',
    transform: {
      '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+     '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
+     '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'jest-preview/transforms/file',
    },
    transformIgnorePatterns: [
      '/node_modules/',
-     '^.+\\.module\\.(css|sass|scss)$',
    ],
  }

Known issue​

For now, Image component cannot be loaded properly in Jest Preview Dashboard. The reason is that Jest Preview try to snapshot web application as a static HTML. In the other hand, Next.js's Image component requires Javascript to dynamically load the image. We can brainstorm and fix this issue in the future. You can track the progress at https://github.com/nvh95/jest-preview/issues/62. If you have any idea to support this, please let us know.

With a first-class support for Next.js, we hope Jest Preview gets closer to the mission of helping front end engineers deliver higher quality applications to end users.

Thank you for your support and happy coding!

Another day, another feature added to Jest Preview. Today, we're adding support for Sass, thanks to the awesome work from Truong Nguyen.

Sass is one of the most popular CSS extension language in the ecosystem and is being used widely. From version 0.1.5, style written in Sass will be displayed in Jest Preview Dashboard.

You can even add Sass as an external CSS via jestPreviewConfigure. This is usually handy for stylesheet files imported in src/index.js or src/main.js.

// setupTests.js
import { jestPreviewConfigure } from 'jest-preview';

// Should be path from root of your project
jestPreviewConfigure({
  // Configure external CSS
  externalCss: [
    'demo/global.scss',
    'node_modules/@your-design-system/css/dist/index.min.scss', // scss from node_modules
  ],
});

For now, Jest Preview only supports Dart Sass, since LibSass and Node Sass are deprecated. One caveat is that Jest Preview doesn't support load path yet. We will add it to the next version.

We hope with the support of Sass, Jest Preview can cover more use cases and be more useful for front end engineers to write tests. If you have any questions, please reach us at Discussion.

Happy jesting!

Hello everyone. It's been 17 days from the first version of Jest Preview. We have worked hard to make Jest Preview a great library to support frontend engineers writing and debugging tests in Jest. We completed the implementation to support:

• 👀 Preview your actual app's HTML in a browser in milliseconds.
• 🔄 Auto reload browser when execute preview.debug().
• 💅 Support CSS:
  • ✅ Direct CSS import
  • ✅ Styled-components
  • ✅ External CSS
  • ✅ CSS Modules
• 🌄 Support viewing images.

We're also working on Sass and plan to release it in a couple of days.

Jest Preview wants to be a "just work" library, it means users can just run npm install --save-dev jest-preview and use it right away. However, to view the actual app's UI in a browser, we need to configure it a bit. We did write some instructions in README.md. But with the growing of project complexity and demands of adding new features, we decided to build a dedicated documentation site for Jest Preview. We are happy to announce that you can now access the documentation at www.jest-preview.com.

We will try to document it as detailed as possible, but we will also try to keep it simple for developers know Jest Preview for the first time. Advanced users can configure their own configuration to adapt to special use cases, new comers can just quickly install Jest Preview and get benefits from it.

The documentation is still very new, we will work to make it clear and concise as much as possible. We also appreciate your helps to improve the documentation such as keep it up-to-date, fixing the typo, paraphrase parts are not clear. Please feel free to open an issue or pull request to report any unclear parts and suggest improvements to documentation.

Thank you for your support and happy coding!