Our great sponsors
-
tour-of-heroes-react-cypress-ts
The final application built in the book CCTDD: Cypress Component Test Driven Design
In the previous post we covered triple combined coverage in a React app written in JS . Alas, Typescript can be tricky with combined code coverage. We continue the series with a Typescript example using the React TS app featured in the book CCTDD: Cypress Component Test Driven Design. The application built in the book is in TS, includes Cypress e2e, CT tests, as well as React Testing Library mirrors of them. The repo tour-of-heroes-react-cypress-ts has the final version of the repo with triple combined coverage setup. The state of the repo prior to code coverage is in the branch before-code-coverage and there is a sample PR for reproducing this guide.
-
import '@cypress/instrument-cra' import {defineConfig} from 'cypress' const codeCoverageTask = require('@bahmutov/cypress-code-coverage/plugin') module.exports = defineConfig({ projectId: '7mypio', experimentalSingleTabRunMode: true, retries: { runMode: 2, openMode: 0, }, env: { API_URL: 'http://localhost:4000/api', }, e2e: { specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}', baseUrl: 'http://localhost:3000', setupNodeEvents(on, config) { return Object.assign({}, config, codeCoverageTask(on, config)) }, }, component: { setupNodeEvents(on, config) { return Object.assign({}, config, codeCoverageTask(on, config)) }, specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}', devServer: { framework: 'create-react-app', bundler: 'webpack', // here are the additional settings from Gleb's instructions webpackConfig: { // workaround to react-scripts 5 issue https://github.com/cypress-io/cypress/issues/22762 devServer: { port: 3001, }, mode: 'development', devtool: false, module: { rules: [ // application and Cypress files are bundled like React components // and instrumented using the babel-plugin-istanbul { test: /\.ts$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript', ], plugins: [ 'istanbul', ['@babel/plugin-transform-modules-commonjs', {loose: true}], ], }, }, }, ], }, }, }, }, }) /* eslint-disable @typescript-eslint/no-unused-vars */
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
