diff --git a/examples/create-react-app/jest.config.js b/examples/create-react-app/jest.config.js new file mode 100644 index 00000000..d04223d0 --- /dev/null +++ b/examples/create-react-app/jest.config.js @@ -0,0 +1,48 @@ +module.exports = { + roots: ['/src'], + collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'], + setupFiles: ['react-app-polyfill/jsdom'], + // Use `setupTests.js` if you use javascript + setupFilesAfterEnv: ['/src/setupTests.ts'], + testMatch: [ + '/src/**/__tests__/**/*.{js,jsx,ts,tsx}', + '/src/**/*.{spec,test}.{js,jsx,ts,tsx}', + ], + testEnvironment: 'jsdom', + testRunner: 'jest-circus/runner.js', + transform: { + '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': 'jest-preview/transforms/babelCRA', + // Update the regex to support css and sass + '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css', + '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': + 'jest-preview/transforms/fileCRA', + }, + transformIgnorePatterns: [ + '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$', + // Remove to support CSS Modules + // '^.+\\.module\\.(css|sass|scss)$', + ], + modulePaths: [], + moduleNameMapper: { + '^react-native$': 'react-native-web', + // Remove to support CSS Modules + // '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy', + }, + moduleFileExtensions: [ + 'web.js', + 'js', + 'web.ts', + 'ts', + 'web.tsx', + 'tsx', + 'json', + 'web.jsx', + 'jsx', + 'node', + ], + watchPlugins: [ + 'jest-watch-typeahead/filename', + 'jest-watch-typeahead/testname', + ], + resetMocks: true, +}; diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json index 7df54f5a..e7ad6302 100644 --- a/examples/create-react-app/package.json +++ b/examples/create-react-app/package.json @@ -19,7 +19,7 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test", + "test": "react-scripts test -- --config=jest.config.js", "test:nc": "npm run test -- --no-cache", "eject": "react-scripts eject", "jest-preview": "jest-preview", @@ -46,11 +46,5 @@ "devDependencies": { "jest-preview": "file:../..", "npm-run-all": "^4.1.5" - }, - "jest": { - "transform": { - "^.+\\.css$": "jest-preview/transforms/css", - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/fileCRA" - } } } diff --git a/examples/create-react-app/src/App.tsx b/examples/create-react-app/src/App.tsx index 113f9e1c..b1caf790 100644 --- a/examples/create-react-app/src/App.tsx +++ b/examples/create-react-app/src/App.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { ReactComponent as Logo } from './logo.svg'; import logo from './logo.svg'; import logo2 from './assets/images/logo.svg'; +import styles from './style.module.css'; import './App.css'; import './assets/css/App.css'; @@ -15,6 +16,7 @@ function App() { logo logo2

Create React App example

+

Styled by CSS Modules