Using the built in cypress typescript support - component tests results in webpack error

[basarat]

Example error:

Error: Webpack Compilation Error
./cypress/component/App.test.tsx 7:10
Module parse failed: Unexpected token (7:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| describe('HelloWorld component', () => {
|   it('works', () => {
>     mount(<App />);
|     // use standard Cypress commands
|     cy.contains('learn react').should('be.visible');
 @ multi ./cypress/component/App.test.tsx main[0]

Setup

• Create project:

npx create-react-app my-app --template typescript
cd my-app
npm i cypress cypress-react-unit-test

• cypress.json

{
  "experimentalComponentTesting": true
}

• cypress/plugins/index.js

module.exports = (on, config) => {
  require('cypress-react-unit-test/plugins/react-scripts')(on, config)
  return config
}

• cypress/component/App.test.tsx

import React from 'react';
import { mount } from 'cypress-react-unit-test'
import App from '../../src/App';

describe('HelloWorld component', () => {
  it('works', () => {
    mount(<App />);
    // use standard Cypress commands
    cy.contains('learn react').should('be.visible');
  });
});

• Now run npx cypress open and select the component test App.test.tsx. You will see the error as shown:

The default zero config cypress support for TypeScript in integration tests is lovely and would like the same for component tests 🌹

[bahmutov]

Hi @basarat thanks for trying component testing. In this case, could you place the component test inside src folder for now? react-scripts assumes everything is in src folder and does not transpile files in cypress folder. I will try to come up with a better solution, we probably should edit the webpack loader rules to transpile src AND componentFolder.

[basarat]

In this case, could you place the component test inside src folder for now

Worked like a charm. Thanks. I'll record a video and add it to the schedule. Its beautiful 🌹 💯

[bahmutov]

@basarat I will reopen this issue so maybe I can solve it by tweaking bundling rules in this case

[bahmutov]

🎉 This issue has been resolved in version 4.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀