Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pre-configured code transform + Replace Vite Library Mode by raw Rollup #47

Merged
merged 11 commits into from
Apr 15, 2022
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,7 @@ dist-ssr
*.sln
*.sw?
.npmrc

build
presets
transforms
91 changes: 52 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,47 +75,22 @@ yarn add --dev jest-preview
pnpm install --dev jest-preview
```

### 2. Create `cssTransform.js` and `fileTransform.js`
### 2. Configure jest's transform to transform CSS and files

```javascript
// config/jest/cssTransform.js
'use strict';

const { processCss } = require('jest-preview');

module.exports = {
process(src, filename) {
return processCss(src, filename);
},
};
```

```javascript
// config/jest/fileTransform.js
'use strict';

const { processFile } = require('jest-preview');
`jest-preview` comes with pre-configured transformations to intercept CSS and files. This is a recommended way to configure. However, you can configure it yourself using exported transform functions as well. See [Advanced configurations](#advanced-configurations) for more.

module.exports = {
process(src, filename) {
return processFile(src, filename);
},
};
```
Update `jest.config.js`:

For Create React App users, please use `processFileCRA` instead of `processFile`. See more at [examples/create-react-app/README.md](./examples/create-react-app/README.md#installation-and-usage)

### 3. Configure jest's transform to intercept CSS and files

```javascript
// jest.config.js
```js
transform: {
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js",
},
"^.+\\.css$": "jest-preview/transforms/css",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file",
}
```

### 4. If you use CSS Modules, make sure it doesn't get ignored
For Create React App users, please use `jest-preview/transforms/fileCRA` instead of `jest-preview/transforms/file`. See more at [examples/create-react-app/README.md](./examples/create-react-app/README.md#installation-and-usage)

### 3. If you use CSS Modules, make sure it doesn't get ignored

In most cases, CSS Modules is ignored in Jest environment. For example, Create React App default configuration ignores CSS Modules via [transformIgnorePatterns](https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L53) and [moduleNameMapper](https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L58). To make CSS Modules works with Jest Preview, we need to make sure it isn't ignored. Remove options to ignore CSS Modules or mapping using a third party library (such as [identity-obj-proxy](https://github.com/keyz/identity-obj-proxy)).

Expand All @@ -129,7 +104,7 @@ moduleNameMapper: {
},
```

### 5. (Optional) Configure external CSS
### 4. (Optional) Configure external CSS

Sometimes, there are some CSS files imported outside your current test components (e.g: CSS imported in `src/index.js`, `src/main.tsx`). In this case, you can manually add those CSS files to `jest-preview` by `jestPreviewConfigure`. Notice that they should be path from root of your project.

Expand Down Expand Up @@ -213,11 +188,49 @@ Then visit http://localhost:3336 to see the preview

<img alt="Preview your jest test in the browser" src="https://user-images.githubusercontent.com/8603085/161393898-7e283e38-6114-4064-9414-a0ce6d52361d.png" width="600" />

## Advanced configurations

You should use [Pre-configured transformation](#2-configure-jests-transform-to-transform-css-and-files) in most cases. However, if you have existing code transformation, you can use following provided ones as follow:

- `processCss`: Process CSS files
- `processFile`: Process files
- `processFileCRA`: Process files for Create React App

For examples:

````js
```javascript
// config/jest/cssTransform.js
'use strict';

const { processCss } = require('jest-preview');

module.exports = {
process(src, filename) {
return processCss(src, filename);
},
};
````

```javascript
// config/jest/fileTransform.js
'use strict';

const { processFile } = require('jest-preview');
// Use processFileCRA for Create React App

module.exports = {
process(src, filename) {
return processFile(src, filename); // Use processFileCRA for Create React App
},
};
```

## Upcoming features

- Support more `css-in-js` libraries
- Multiple preview
- [You name it](https://github.com/nvh95/jest-preview/labels/feature_request)
- Support more `css-in-js` libraries.
- Multiple preview.
- [You name it](https://github.com/nvh95/jest-preview/labels/feature_request).

## Run jest-preview locally

Expand Down
28 changes: 15 additions & 13 deletions examples/create-react-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,20 @@ jest is setup with create-react-app by default, we don't need to do anything mor

## Installation and Usage

Please refer to [Installation](../../README.md#installation) and [Usage](../../README.md#usage).
Except for step 2 of installation: Create `fileTransform.js`:

- Because `create-react-app` allows user to [use svg files as React components](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs), `jest-preview` therefore needs to support that, so we use the below config:
Please refer to [Installation](../../README.md#installation) and [Usage](../../README.md#installation).
Except for step 2 of installation: **Configure jest's transform to transform CSS and files**

- Because `create-react-app` allows user to [use svg files as React components](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs), `jest-preview` therefore needs to support that, we update Jest's configuration in `package.json` as follow:

```json
{
"transform": {
// Other transforms
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be jest-preview/transforms/fileCRA

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be jest-preview/transforms/fileCRA right?

}
}
```

```javascript
// config/jest/fileTransform.js
const { processFileCRA } = require('jest-preview');
## Caveats

module.exports = {
process(src, filename) {
return processFileCRA(src, filename);
},
};
```
Even though `jest-preview` itself supports CSS Modules, it doesn't support `create-react-app` without ejecting yet. The support will land in the next version.
7 changes: 0 additions & 7 deletions examples/create-react-app/config/jest/cssTransform.js

This file was deleted.

7 changes: 0 additions & 7 deletions examples/create-react-app/config/jest/fileTransform.js

This file was deleted.

5 changes: 3 additions & 2 deletions examples/create-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:nc": "npm run test -- --no-cache",
"eject": "react-scripts eject",
"jest-preview": "jest-preview",
"test:debug": "npm-run-all -p test jest-preview"
Expand Down Expand Up @@ -48,8 +49,8 @@
},
"jest": {
"transform": {
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
"^.+\\.css$": "jest-preview/transforms/css",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/fileCRA"
}
}
}
9 changes: 0 additions & 9 deletions examples/vite-react/config/jest/cssTransform.js

This file was deleted.

9 changes: 0 additions & 9 deletions examples/vite-react/config/jest/fileTransform.js

This file was deleted.

4 changes: 2 additions & 2 deletions examples/vite-react/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ module.exports = {
modulePaths: ['<rootDir>/src'],
transform: {
'^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
'^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
'^.+\\.css$': 'jest-preview/transforms/css',
'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
'<rootDir>/config/jest/fileTransform.js',
'jest-preview/transforms/file',
},
transformIgnorePatterns: [
'[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
Expand Down
1 change: 1 addition & 0 deletions examples/vite-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"preview": "vite preview",
"jest-preview": "jest-preview",
"test": "NODE_ENV=test jest --watch",
"test:nc": "npm run test -- --no-cache",
"test:debug": "npm-run-all -p test jest-preview"
},
"dependencies": {
Expand Down
5 changes: 2 additions & 3 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ module.exports = {
modulePaths: ['<rootDir>/demo'],
transform: {
'^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
'^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|json)$)':
'<rootDir>/config/jest/fileTransform.js',
'^.+\\.css$': '<rootDir>/transforms/css',
'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|json)$)': '<rootDir>/transforms/file',
},
transformIgnorePatterns: [
'[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
Expand Down
Loading