https://github.com/styled-components/benchmark
https://github.com/styled-components/benchmark
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/styled-components/benchmark
- Owner: styled-components
- Created: 2017-02-12T16:27:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-14T09:34:55.000Z (over 8 years ago)
- Last Synced: 2025-07-14T16:50:35.768Z (12 months ago)
- Language: JavaScript
- Size: 230 KB
- Stars: 9
- Watchers: 5
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Benchmark
Benchmarks performance for both browser and native styled-components. Also benchmarks [cssta](https://github.com/jacobp100/cssta).
To benchmark,
```bash
npm install
npm start
```
## Adding a Test
Under `tests`, there are files for each platform we test: currently browser and native. Each platform test file has a default export of an object whose keys are the test names. The values are objects keyed by the project name (currently `styled` or `cssta`), and the values of these objects are test functions. You do not need to add tests for every project.
```js
export default {
'test name': {
styled: () => {
/* Test function body */
}
}
}
```
Tests are usually formed by creating a component, and running it through `react-test-renderer`.
```js
const Component = styled.div`
color: ${props => props.color};
`;
const instance = render();
instance.update();
```
All tests are compiled using webpack. React uses production-mode optimisations, and the output is minified. Cssta also has production-mode optimisations.
Tests are benchmarked using Benchmark.js, so are run multiple times. If your test uses a global cache, you should clear the cache before running it.